element-ui el-upload - 自定义 FormData

乔伯寅
2023-12-01

前端时间写到自定义上传记录一下:

vue 2.x

node -v 12.14

element-ui 2.14.1


    <el-upload
      class="upload-demo"
      drag
      ref="uploadFileRef"
      action="xxx"
      :limit='200'
      :auto-upload = 'false'
      :http-request="uploadSectionFile"
      :file-list="uploadFileList"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em>
      <div>{{filterFileInfo}},单次最多可上传200个文件</div>
      </div>
    </el-upload>

      <el-button type="primary" @click="submitUpload()">确 定</el-button>

  data () {
    return {
      uploadFileList: [],
      // 需要上传文件的总数
      uploadFileCountAll: 0,
      // 上穿完成的文件数目
      uploadedFileCount: 0
}
}

    // 自定义formdata 上传
    uploadSectionFile (content) {
      const uploadData = new FormData();
      uploadData.append('file', content.file);
      uploadData.append('userId', this.userId);
      uploadData.append('resourceType', this.resourceType);
      uploadData.append('resourceLibrary', this.getResourceLibrary(this.setSelectFolderInfo[0]));
      uploadData.append('resourceLibraryCode', this.setSelectFolderInfo[0]);
      uploadData.append('resourceFolder', this.setSelectFolderInfo[1]);
      uploadResource(uploadData).then(res => {
        this.uploadedFileCount++;
        if (this.uploadedFileCount >= this.uploadFileCountAll) {
          this.loading = false;
          // 在刷新的 emit 中有关闭弹窗的功能。
          this.$emit('closeUploadDialog');
        }
      });
    },

    // 确定上传
    submitUpload () {
      this.loading = true;
      this.uploadFileCountAll = this.uploadFileList.length;
      this.$refs.uploadFileRef.submit();
    },

接口页面:
// 上传资源文件
export function uploadResource (param) {
  return http.post('/api/resource/upload', param);
}

 类似资料: