element-ui中的上传组件el-upload非自动上传监听不到success

el-upload非自动上传监听不到success问题

当设置了:auto-upload="false"

监听不到success回调

要用自定义请求去监听

:http-request="requestUploadFile"

//设置 auto-upload为false,要自定义请求http-request
//:auto-upload="false"
//:http-request="requestUploadFile"

<el-upload
          ref="upload"
          class="upload-demo"
          v-loading="loading"
          action="#"
          :headers="Token"
          :limit="1"
          :multiple='true'
          :auto-upload="false"
          :http-request="requestUploadFile"
          :on-change="handleChange"
          :accept="accept"
          :file-list="fileList"
          :on-preview="handlePictureCardPreview"
          :show-file-list="true"
        >
            <el-button type="success">点击上传</el-button>
        </el-upload>
//自定义请求方法
async requestUploadFile(options) {
      const { action, data, file, filename, headers, onError, onProgress, onSuccess } = options;
      
      // 创建 FormData
      const formData = new FormData();
      formData.append(filename, file);
      
      // 添加额外数据
      if (data) {
        Object.keys(data).forEach(key => {
          formData.append(key, data[key]);
        });
      }
      
      // 使用 axios 或其他 HTTP 库上传
      axios.post(this.BASE_API+this.url, formData, {
        headers: {
          ...headers,
          'Content-Type': 'multipart/form-data'
        },
      }).then(response => {
        // console.log('上传成功---',response)
       if(response.data.code == 0){
          this.$emit('queryHandle')
          this.$message({
              message: response.data.msg,
              type: "success",
          });
       }else{
        this.$message({
          message: response.data.msg,
          type: "error",
        });
       }
      }).catch(error => {
        this.$message({
          message: error,
          type: "error",
        });
      });
    },
  //发送按钮
    submitUpload() {
      this.$refs.upload.submit();
    },
  

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值