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>
//對上傳文件再次校驗
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", }); }
// if(!isLt2M) {
// this.$message({
// message: '上傳文件大小不能超過 10MB!',
// type: 'warning'
// });
// }
// return extension || extension2 && isLt2M
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(); //清除上傳文件
}
});
},