elementui?el-upload一次請求上傳多個文件的實現(xiàn)

更新時間：2023年10月08日 09:52:14 作者：D浩DzD

使用ElementUI?Upload的時候發(fā)現(xiàn)如果是默認方案,上傳多張圖片并不是真正的一次上傳多張,本文就來介紹一下elementui?el-upload一次請求上傳多個文件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

在使用element中的el-upload是時，當我們要上傳多個文件時，el-upload內(nèi)部會多次調(diào)用this.$refs.upload.submit();方法，從而實現(xiàn)多個文件上傳，但是有時候，我們希望，當上傳多個文件的時候，只給后端發(fā)送一次請求，這樣就需要先把el-upload的自動上傳改為手動上傳:auto-upload=“false”

          <el-upload 
              ref="upload" 
              :limit="10" 
              accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" 
              name="files" 
              :multiple="true"
              :action="baseURL"
              :headers="myToken" <!-- 請求頭設置 -->
              :on-change="handleFileChange"
              :before-remove="handleFileRemove" 
              :auto-upload="false"
              :file-list="upload.fileList" 
              >
              <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
            </el-upload>
            <el-button type="primary" @click="submitFileForm">確 定</el-button>

data(){
	return {
      upload: {
        fileList: [],
        fileName: []
      },
	}
}

通過FormData創(chuàng)建一個數(shù)據(jù)對象，并且將上傳的文件append到對象中

    // 上傳發(fā)生變化鉤子
    handleFileChange(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 刪除之前鉤子
    handleFileRemove(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 提交上傳文件
    submitFileForm() {
      // 創(chuàng)建新的數(shù)據(jù)對象
      let formData = new FormData();
      // 將上傳的文件放到數(shù)據(jù)對象中
      this.upload.fileList.forEach(file => {
        formData.append('file', file.raw);
        this.upload.fileName.push(file.name);
      });
      console.log("提交前",formData.getAll('file'));
      // 文件名
      formData.append('fileName', this.upload.fileName);
      // 自定義上傳
      this.$api.uploadFile(formData).then(response => {
          console.log(response);
          // if(response.code == 200){
          //   this.$refs.upload.clearFiles();
          //   this.msgSuccess('上傳成功！');
          // }else{
          //   this.$message.error(response.msg);
          // }
        })
        .catch(error => {
          this.$message.error('上傳失?。?);
        });
    },

使用自定義上傳的接口，而不是使用*this.$refs.upload.submit();*方法
注意上傳文件接口的請求頭中headers中的’Content-Type’要為’multipart/form-data’

// 封裝的上傳請求
	uploadFile(params) {
		return axios.post(`/shiro/swpe/permission/uploadOrStartProceBPS`, params,
		 { headers: { 'Content-Type': 'multipart/form-data', token: window.localStorage.getItem('token')}})
	},

到此這篇關于elementui el-upload一次請求上傳多個文件的實現(xiàn)的文章就介紹到這了,更多相關elementui el-upload請求多文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: