元素ui上传组件不发送流数据

Question

使用 el-upload 组件上传图片

我从服务器收到 204 无内容响应

   el-upload(
        action="https://s3-us-west-1.amazonaws.com/stage.greenausm.com",
        :mulitple="false",
        :data="xhrData"
        :show-file-list="false", :on-success="handleAvatarSuccess",
        :before-upload="beforeAvatarUpload",
      )

对服务器的请求没有图片数据

------WebKitFormBoundaryksB7UzZHz8SWLdPk 内容处置：表单数据；名称=“文件”；文件名="img.jpg" 内容类型：image/jpeg

-----WebKitFormBoundaryksB7UzZHz8SWLdPk--

如何让组件发送图片数据

Answer 1

我有一个类似的问题，我使用表单数据解决了它。我将 auto-upload 属性设置为 false，然后传递了一个自定义 http 请求

<el-upload  drag action="" :data="fileList"   :http-request="uploadFiles" :auto-upload="false" :multiple="false" >

关于上传文件的自定义函数，我创建了一个新的 formData 对象并在上传到服务器之前对其进行了处理。这是一个例子

    uploadFiles() {
      //Create new formData object
      const fd = new FormData();

      //append the file you want to upload
      fd.append("file", this.file.raw);

      //add other data to the form data object if needed
      fd.append("data", this.data);

     //send call the api to upload files using axios or any other means
       axios.post('http://serveUrl/upload', fd);
   },