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.