vue2,使用element中的Upload 上传文件,自定义上传http-request上传,上传附件支持多选,多个文件只发送一次请求,代码里有注释
vue2,使用element中的Upload 上传文件,自定义上传http-request上传,上传附件支持多选,多个文件只发送一次请求。
·
复制直接使用,组件根据multiple是否多选来返回附件内容,支持多选就返回数据附件,则返回一个附件对象。
//uploadFiles.vue
<template>
<div>
<el-upload
class="avatar-uploader"
action="#"
:accept="accept"
:show-file-list="false"
:http-request="HttpRequest"
:multiple="multiple"
:on-change="onChangeFile"
ref="uploadFileRef"
>
<slot />
</el-upload>
</div>
</template>
<script>
export default {
/**
* limitation // 文件上传限制大小 type number 50就是50Mb
* accept // 上传文件类型限制 accept=".xls, .xlsx"
* multiple// 是否支持多选
*/
name: "uploadFiles",
props: ['limitation','accept','multiple'],
data() {
return {
flag:true, // 节流控制
filesList:[] // 上传的附件内容
}
},
methods: {
// 触发父组件的fileRet方法,并返回所选附件数据Array
updateHeading(files) {
this.$emit('fileRet',files);
this.emptyData();
},
HttpRequest(data){
const isLt50M = data.file.size / 1024 / 1024 < this.limitation; // 限制文件大小
if (!isLt50M) {
this.$message.error('上传头像图片大小不能超过 50MB!');
return
}
// 调用后台接口逻辑
this.throttle(()=>{
let retFile;
// 如何支持多文件上传,返回附件数组,则返回当个文件对象
if (this.multiple){
retFile = this.filesList.map(o=>o.raw)
} else {
retFile = data.file
}
// 附件上传参数用formData.append('file',retFile)
this.updateHeading(retFile)
},600)
},
// 清空已上传的附件数据,初始化
emptyData() {
this.$refs.uploadFileRef && this.$refs.uploadFileRef.clearFiles();
this.filesList = [];
},
//使用节流的方式去触发提交,避免多上传附件时,选几个附件就会触发几次提交
throttle(fn,delay){
if(this.flag){
setTimeout(() =>{ fn();this.flag = true },delay)
}
this.flag = false;
},
onChangeFile(file,fileList){
this.filesList = fileList
},
},
mounted() {},
computed: {},
watch: {}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)