and use next code to send data to server: let fo" /> and use next code to send data to server: let fo" /> and use next code to send data to server: let fo"/>

How to "reupload" image to server with input type="file" and axios?

147 views Asked by At

I am writing VueJS application. I use axios to upload images to server. I have an <input type="file"> and use next code to send data to server:

let formData = new FormData();
formData.append("image", self.image);

self.axios.post("/image/", 
        formData, 
        {headers: {"Content-Type": "multipart/form-data"}}
).then(response => // smth next

Now I want to get uploaded image from server and place as file to same <input type="file"> to be able to use previous code one more time to reupload downloaded image back to server.

I've tried many options but last one looks like:

const self = this;
self.axios.get(`/image/${newValue}`).then(res => {
  self.file = new File(
    [new Buffer(res.data, "binary").toString("base64")],
    res.request.responseURL.split("/api/image/")[1],
    { type: res.headers["content-type"] }
  );

Image is downloaded and successfully uploaded but it corrupted -> created .png file can't be opened.

One more detail I've noticed: reulpoaded file always bigger then original. Original file was 810kb, reuploaded 8.4mb. So probably I am doing something wrong :P

Will appreciate any suggestions and answer any additional questions.

0

There are 0 answers