dt-vui

Vue Json upload for Vue.

Installation

NPM

npm install dt-vui

Issue

新增组件需求 或是 bug 请提交到 [email protected]

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'|dataUrl 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：文件索引）