el-upload 上传携带参数

1、template:

<el-upload
  class="upload-file-demo"
  action="上传的url"
  ref="uploadComp"
  :auto-upload="false" //禁止自动上传
  :show-file-list='true' //显示上传文件名
  :file-list="certificates2" //回显文件
  :before-upload="beforeUpload" //文件上传前
  :on-change="handlePictureCardPreview2" //文件改变的时候
  :on-success="handleAvatarSuccess2" //文件上传成功回调
  :on-exceed="handleExceed2" //文件限制上传
  :on-remove="handleRemove2" //文件删除
  :limit="1" //限制个数
  :disabled="loading"
  :data="uploadData" //上传携带的参数
  accept=".xls,.xlsx,.png,.jpe,.jpeg"
>
  <el-button :loading="loading" class="upload_btn" size="small" type="primary">上传明细</el-button>
</el-upload>

2、script:

// 文件上传 - 上传前
beforeUpload(file, fileList) {
    this.uploadData = { tradeOrder: this.dataList.id }; //上传携带的参数名
    let promise = new Promise((resolve) => {
        this.$nextTick(function () {
            resolve(true);
        });
    });
    return promise;
},
// 文件上传 - 文件选中后上传
handlePictureCardPreview2(file, fileList) {
    this.$refs.uploadComp.submit();
},
//文件上传 - 成功回调
handleAvatarSuccess2(res, file, fileList) {
    // console.log(res);
},
// 文件上传 - 限制上传
handleExceed2(files, fileList) {
    this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
// 文件上传 - 删除
handleRemove2(file, fileList) {
    var that = this;
    fileList.forEach((item, index) => {
        that.certificate2.push(item.url);
    })
},

 

posted @ 2021-08-31 14:24  小蘑菇123  阅读(3336)  评论(0编辑  收藏  举报