vue-ele-upload-file | 使 element-ui upload 组件更简单、好用

安装

1npm install vue-ele-upload-file --save

用法

1import EleUploadFile from 'vue-ele-upload-file'
2
3export default {
4  components: {
5    EleUploadFile
6  }
7}

示例

简单用法

1<template>
2  <ele-upload-file
3    :responseFn="handleResponse"
4    action="https://jsonplaceholder.typicode.com/posts/"
5    v-model="file"
6  />
7</template>
8<script>
9  export default {
10    data() {
11      return {
12        file: []
13      }
14    },
15    methods: {
16      // 对请求结果处理, 返回对象
17      handleResponse(response, file) {
18        return {
19          url: URL.createObjectURL(file.raw),
20          name: file.name,
21          size: file.size
22        }
23      }
24    }
25  }
26</script>

增加属性

1<template>
2  <ele-upload-file
3    :disabled="false"
4    :file-type="['doc', 'pdf', 'png', 'jpeg', 'jpg']"
5    :fileSize="2"
6    :isCanDelete="true"
7    :isCanDownload="true"
8    :isCanUploadSame="true"
9    :isShowSize="true"
10    :isShowTip="true"
11    :limit="6"
12    :multiple="true"
13    :responseFn="handleResponse"
14    action="https://jsonplaceholder.typicode.com/posts/"
15    placeholder="上传附件"
16    v-model="file"
17  />
18</template>

Props 参数

1  props: {
2    // 值
3    value: [String, Object, Array],
4    // 必选参数，上传的地址
5    // 同 element-ui upload 组件
6    action: {
7      type: String,
8      required: true
9    },
10    // 大小限制(MB)
11    fileSize: Number,
12    // 响应处理函数
13    responseFn: Function,
14    // 文件类型, 例如['png', 'jpg', 'jpeg']
15    fileType: Array,
16    // 提示
17    placeholder: String,
18    // 是否禁用
19    disabled: Boolean,
20    // 是否显示文件大小
21    isShowSize: {
22      type: Boolean,
23      default: true
24    },
25    // 是否显示下载
26    isCanDownload: {
27      type: Boolean,
28      default: true
29    },
30    // 是否可删除
31    isCanDelete: {
32      type: Boolean,
33      default: true
34    },
35    // 是否可上传相同文件
36    isCanUploadSame: {
37      type: Boolean,
38      default: true
39    },
40    // 是否显示提示
41    isShowTip: {
42      type: Boolean,
43      default: true
44    },
45    // 设置上传的请求头部
46    // 同 element-ui upload 组件
47    headers: Object,
48    // 是否支持多选文件
49    // 同 element-ui upload 组件
50    multiple: {
51      type: Boolean,
52      default: true
53    },
54    // 上传时附带的额外参数
55    // 同 element-ui upload 组件
56    data: Object,
57    // 上传的文件字段名
58    // 同 element-ui upload 组件
59    name: {
60      type: String,
61      default: 'file'
62    },
63    // 支持发送 cookie 凭证信息
64    // 同 element-ui upload 组件
65    withCredentials: {
66      type: Boolean,
67      default: false
68    },
69    // 接受上传的文件类型
70    // 同 element-ui upload 组件
71    accept: String,
72    // 最大允许上传个数
73    // 同 element-ui upload 组件
74    limit: Number
75  },

事件

事件名称	说明	回调参数
remove	当文件被删除时触发	(file, fileList)
success	文件上传成功时触发	(file, fileList)
error	上传失败时触发	(error)

相关链接

• element-ui upload 组件