專案需求是多個檔案上傳，在一次請求中完成，而ElementUI的上傳元件是每個檔案發一次上傳請求，因此我們藉助FormData的格式向後臺傳檔案組

html程式碼

<div class="upload-file">
 <el-upload
   accept=".xlsx"
   ref="upload"
   multiple
   :limit="5"
   action="http://xxx.xxx.xxx/personality/uploadExcel"
   :on-preview="handlePreview"
   :on-change="handleChange"
   :on-remove="handleRemove"
   :on-exceed="handleExceed"
   :file-list="fileList"
   :http-request="uploadFile"
   :auto-upload="false">
   <el-button slot="trigger" size="small" type="primary">選取檔案</el-button>
   <el-button style="margin-left: 133px;" size="small" type="success" @click="submitUpload">上傳到伺服器
   </el-button>
   <div slot="tip" class="el-upload__tip">只能上傳xlsx檔案，且不超過100m</div>
 </el-upload>
 </div>

修改:auto-upload="false"屬性為false，阻止元件的自動上傳
:http-request="uploadFile"覆蓋上傳事件
@click=“submitUpload”，給上傳按鈕繫結事件

data() {
	return {
		fileData: '',// 檔案上傳資料（多檔案合一）
		fileList: [],// upload多檔案陣列
		uploadData: {
     fieldData: {
      id: '',// 機構id,}
    },}
}


methods:{
		// 上傳檔案
		uploadFile(file) {
		  this.fileData.append('files',file.file); // append增加資料
		},// 上傳到伺服器
	   submitUpload() {
	      let fieldData = this.uploadData.fieldData; // 快取，注意，fieldData不要與fileData看混
	      if (fieldData.id === '') {
	        this.$message({
	          message: '請選擇上傳機構',type: 'warning'
	        })
	      } else if (this.fileList.length === 0) {
	        this.$message({
	          message: '請先選擇檔案',type: 'warning'
	        })
	      } else {
	        const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
	        if (!isLt100M) {
	          this.$message.error('請檢查，上傳檔案大小不能超過100MB!');
	        } else {
	          this.fileData = new FormData(); // new formData物件
	          this.$refs.upload.submit(); // 提交呼叫uploadFile函式
	          this.fileData.append('pathId',fieldData.id); // 新增機構id
	          this.fileData.append('loginToken',this.loginToken); // 新增token
	          post(this.baseUrlData.url_02 + ":8090/personality/uploadExcel",this.fileData).then((response) => {
	            if (response.data.code === 0) {
	              this.$message({
	                message: "上傳成功",type: 'success'
	              });
	              this.fileList = [];
	            } else {
	              this.$message({
	                message: response.data.desc,type: 'error'
	              })
	            }
	          });
	        }
	      }
	    },//移除
      handleRemove(file,fileList) {
        this.fileList = fileList;
        // return this.$confirm(`確定移除 ${ file.name }？`);
      },// 選取檔案超過數量提示
      handleExceed(files,fileList) {
        this.$message.warning(`當前限制選擇 5 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);
      },//監控上傳檔案列表
      handleChange(file,fileList) {
        let existFile = fileList.slice(0,fileList.length - 1).find(f => f.name === file.name);
        if (existFile) {
          this.$message.error('當前檔案已經存在!');
          fileList.pop();
        }
        this.fileList = fileList;
      },}

此時就達到上傳4個檔案只發送了一個xhr請求了

到此這篇關於element-ui中el-upload多檔案一次性上傳的實現的文章就介紹到這了,更多相關el-upload多檔案上傳內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！