dt-vui

Vue Json upload for Vue.

Installation

NPM

npm install dt-vui

Issue

新增组件需求 或是 bug 请提交到 [e-mail]

Mount

global

import Vue from 'vue'
import dtVui from 'dt-vui'
 
// you can set default global options and events when use
Vue.use(dtVui)

local

import { Upload } from 'dt-vui'
 
export default {
  components: {
    Upload
  }
}

默认上传

 
// 文件上传
<upload v-model="file" :maxCount="1" :beforeRead="beforeRead" :onPreview="onPreview"></upload>
<script>
  data() {
    return {
      files: [{ url: '....' }]
    }
  },
  methods: {
    beforeRead(files) {
      // 这一在这里做一些上传前的校验
    }，
    onPreview(file, index) {
      // 在这里返回文件对象  自己实现UI弹出层 将file对象里的 url 或者 content 赋值给弹出层的 img
    }
  }
</script>

上传状态

 
// 文件上传
<upload v-model="file" :maxCount="1" :afterRead="afterRead"></upload>
<script>
  data() {
    return {
      files: [{ url: '....' }]
    }
  },
  methods: {
    afterRead(files) {
      files.status = "loading";
      files.message = "上传中...";
      let formData = new FormData();
      formData.append("file", files.file);
      http("url", formData)
        .then(res => {
          files.status = "success";
        })
        .catch((err) => {
          files.status = "error";
          files.message = "上传失败";
        });
      }
    }
  }
</script>

api

Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值 [{ url: '', name: 'asdsa.png' }]	array	--	--
maxSize	上传文件大小限制 1 = 1MB	number	--	--
accept	上传格式 例 '.jpg, .png, .jif'	string	--	image/* image/*
disabled	是否只读	boolean	--	--
deletable	是否显示删除按钮	boolean	--	--
resultType	字段表示文件读取结果的类型，上传大文件时，建议使用 file 类型，避免卡顿	string	file 结果仅包含 File 对象,text 结果包含 File 对象，以及文件的文本内容,dataUrl 结果包含 File 对象，以及文件对应的 base64 编码	'dataUrl','text','file'
maxCount	最多上传数量	number	--	--
multiple	是否可多选	boolean	--	--
beforeRead	文件上传前的回调	Function(files：上传的文件)	--	--
afterRead	文件读取完成后的回调函数	Function(files：上传的文件)	--	--
beforeDelete	删除前的回调函数	Function(file: 删除文件, index: 删除文件的索引)	--	--
onPreview	预览按钮点击的回调函数	Function(item: 文件对象, index: 文件对象的索引)	---	--

Event

方法名	说明	参数
oversize	文件读取大小超过限制的回调	files

Methods

方法名	说明	参数
onDelete	删除某个文件	（files：文件, index：文件索引）