element ui upload component not sending stream data

Question

Image Upload using el-upload component

I am getting 204 no content response from the server

   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",
      )

The request to the server does not have the image data

------WebKitFormBoundaryksB7UzZHz8SWLdPk Content-Disposition: form-data; name="file"; filename="img.jpg" Content-Type: image/jpeg

------WebKitFormBoundaryksB7UzZHz8SWLdPk--

How can I get the component to send image data

Lupyana Mbembati Lupyana Mbembati · Accepted Answer · 2018-07-30T12:47:00

I had a similar problem i worked around it using form data. I set the auto-upload attribute to false then passed a custom http request

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

on the custom function to upload files I created a new formData object and handled it before uploading to the server. Here is an example

    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);
   },

element ui upload component not sending stream data

1 Answers