郑州网站建设推广报价龙南县建设局网站

复制直接使用，组件根据multiple是否多选来返回附件内容，支持多选就返回数据附件，则返回一个附件对象。

//uploadFiles.vue<template><div><el-uploadclass="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方法，并返回所选附件数据ArrayupdateHeading(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>