企业网站托管新趋势,网站费用单,龙岗营销型网站建设,企业网站手机端太简洁复制直接使用#xff0c;组件根据multiple是否多选来返回附件内容#xff0c;支持多选就返回数据附件#xff0c;则返回一个附件对象。
//uploadFiles.vuetemplatedivel-uploadclassavatar-uploaderaction#:acceptaccep…复制直接使用组件根据multiple是否多选来返回附件内容支持多选就返回数据附件则返回一个附件对象。
//uploadFiles.vuetemplatedivel-uploadclassavatar-uploaderaction#:acceptaccept:show-file-listfalse:http-requestHttpRequest:multiplemultiple:on-changeonChangeFilerefuploadFileRefslot //el-upload/div
/templatescript
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(oo.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
