安徽房产网站建设,鄂尔多斯市建设厅网站,宝安企业网站建设,本校网站建设复制直接使用#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
