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

最新推荐文章于 2025-09-28 18:18:21 发布

原创最新推荐文章于 2025-09-28 18:18:21 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#el-upload

当设置了: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();
    },