1、此方法是先选取文件,后直接一次性上传文件,只会发送一次请求
<el-form-item label="上传附件"> <el-upload :file-list="fileListArr" //选择的上传文件列表数据 action="scfj" //上传地址,可以直接写上传地址比如www.baidu.com;我这里的地址是需要携带其他参数的所以这里随便填写,因为这是必填参数 ref="scfj" accept=".xls, .xlsx, .doc, .docx, .rar" //可上传文件的类型 :before-upload="beforeUploadFj" //此方法再上传之前对文件再次校验 :on-exceed="handleExceedFj" //此方法用来对上传文件超过个数进行限制 :on-remove="handleRemoveFj" //此方法删除上传文件时触发 multiple //是否可以上传多个文件 :limit="10" //上传文件的个数限制 :auto-upload="false" //关闭自动上传;如开启自动上传,即选择之后就上传 :on-change="onChangeFj" //此方法选择文件时候触发 > <el-button slot="trigger" size="small" type="primary" >选取文件</el-button > <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFj" //调用上传接口进行上传 >上传附件</el-button > </el-upload> </el-form-item>
//对上传文件再次校验// if(!isLt2M) { // this.$message({ // message: '上传文件大小不能超过 10MB!', // type: 'warning' // }); // } // return extension || extension2 && isLt2M
beforeUploadFj(file) { let zhzxFile = file.name.substring(file.name.lastIndexOf(".") + 1); const extension = zhzxFile === "xls"; const extension2 = zhzxFile === "xlsx"; const extension3 = zhzxFile === "doc"; const extension4 = zhzxFile === "docx"; const extension5 = zhzxFile === "rar"; // const isLt2M = file.size / 1024 / 1024 < 10 根据需求是否需要对上传文件大小进行限制 if ( !extension && !extension2 && !extension3 && !extension4 && !extension5 ) { this.$message({ message: "上传文件只能是 xls、xlsx、doc、docx、rar格式!", type: "warning", }); }
return extension || extension2 || extension3 || extension4 || extension5; },handleExceedFj(files, fileList) { this.$message.warning( `当前限制选择 10 个文件,本次选择了 ${files.length} 个文件,共选择了 ${ files.length + fileList.length } 个文件` ); }, //删除事件,需要根据具体业务分析,即删除时候从数组中去除选中的文件 handleRemoveFj(file, fileList) { console.log(file.fileList) //this.fileListArr = fileList; //let delArr = this.saveScfjArr.filter((item) => { // return item != file.name; // });
//对上传文件超过个数进行限制
// this.saveScfjArr = delArr;
//this.gwModleObj.scfj = this.saveScfjArr; }, //选择文件时候触发 需根据需求具体分析 onChangeFj(file, fileList) { console.log(file.fileList) //this.fileListArr = fileList; //this.gwModleObj.scfj = fileList; //this.$refs.gwModleObj.validateField("scfj"); //this.saveSuccessId = 1; },
uploadFj(value) { this.$refs.scfj.submit(); let formData = new FormData(); //所需参数 this.fileListArr.forEach((item) => { formData.append("file", item.raw); }); //接口
//上传接口,进行上传
getUploadFjApi(formData).then((res) => { if (res.data.code == 200) { this.$message.success("附件上传成功!"); this.saveScfjArr = res.data.data; this.saveSuccessId = ""; this.$refs.scfj.clearFiles(); //清楚上传文件 } }); },