ElementUI实现el-upload多个文件上传一个接口并带入参

在这里插入图片描述

如图片,在点击提交申请时一个接口上传多个附件并附带说明参数。

<el-upload class="upload"
                       ref="upload"
                       :data="submitData"
                       action="/dsp/mdm/modelapply/upload"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       :before-remove="beforeRemove"
                       multiple
                       :on-success="handleAvatarSuccess"
                       name="file"
                       :on-change="fileStatusChange"
                       :auto-upload="false"
                       accept=".doc,.docx,.zip,.pdf,.xls,.xlsx"
                       :limit="3"
                       :on-exceed="handleExceed"
                       :file-list="fileList">
                       
<el-form-item label="申请说明"
                      prop="applydesc">
          <el-input type="textarea"
                    clearable
                    maxlength="200"
                    v-model="submitApplyForm.applydesc"></el-input>
        </el-form-item>

为上传的代码块,设置:data为说明值。
首先在vue的数据定义做 this.uploadForm = new FormData(); 用来存放表单数据,点击提交时,将fileList中的值循环添加到uploadForm 中
在这里插入图片描述

let that = this;
 for (var i = 0; i < this.fileList.length; i++) {
      that.uploadForm.append('file', that.fileList[i].raw);
 }
this.uploadForm.append('applydesc', this.submitApplyForm.applydesc);
request.uploadFile('/dsp/mdm/modelapply/upload', this.uploadForm); 



  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值