elementui el-upload一次接口請(qǐng)求上傳多個(gè)文件

el-upload組件多個(gè)文件上傳都是多次請(qǐng)求上傳接口,沒有在文檔中找到能夠通過(guò)一次請(qǐng)求把所有文件上傳的設(shè)置。最后只能通過(guò)用組件的部分功能,拋棄組件上傳功能,通過(guò)axios自己將所有文件一次上傳。

<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
  <el-upload 
    ref="upload" 
    :limit="10" 
    accept=".txt" 
    name="files" 
    :multiple="true" //可多選
    :action="upload.url" //必填隨便填
    :headers="upload.headers"
    :disabled="upload.isUploading" 
    :on-change="handleFileChange"
    :before-remove="handleFileRemove" 
    :auto-upload="false"
    :file-list="upload.fileList" 
    drag
    >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      將文件拖到此處,或
      <em>點(diǎn)擊上傳</em>
    </div>
    <div class="el-upload__tip" style="color:red" slot="tip">提示:僅允許導(dǎo)入“txt”格式文件!</div>
  </el-upload>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitFileForm">確 定</el-button>
    <el-button @click="upload.open = false">取 消</el-button>
  </div>
</el-dialog>

data() {
    return {
      upload: {
        // 是否顯示彈出層(用戶導(dǎo)入)
        open: false,
        // 彈出層標(biāo)題(用戶導(dǎo)入)
        title: '',
        // 是否禁用上傳
        isUploading: false,
        // 是否更新已經(jīng)存在的用戶數(shù)據(jù)
        updateSupport: 0,
        // 設(shè)置上傳的請(qǐng)求頭部
        headers: { Authorization: getToken() },
        // 上傳的地址
        url: baseURL + 'codefileupload/upload',
        fileList: [],
        fileName: []
      }
    };
  },
  
  methods:{
    // 上傳發(fā)生變化鉤子
    handleFileChange(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 刪除之前鉤子
    handleFileRemove(file, fileList) {
      this.upload.fileList = fileList;
    },
    // 提交上傳文件
    submitFileForm() {
      <!-- 創(chuàng)建新的數(shù)據(jù)對(duì)象 -->
      let formData = new FormData();
      <!-- 將上傳的文件放到數(shù)據(jù)對(duì)象中 -->
      this.upload.fileList.forEach(file => {
        formData.append('files', file.raw);
        this.upload.fileName.push(file.name);
      });
      <!-- 文件名 -->
      formData.append('fileName', this.upload.fileName);
      <!-- 自定義上傳 -->
      axios
        .post(this.upload.url, formData, { headers: { 'Content-Type': 'multipart/form-data', Authorization: getToken() } })
        .then(response => {
          if(response.code == 200){
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.msgSuccess('上傳成功!');
          }else{
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.$message.error('上傳失??!');
        });
    }
  }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容