element-ui el-upload - 自定义 FormData

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

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);
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值