0👍
If I understand you correctly, you want to post your images list to backend, but you don’t know how to get data from files like this:
enter image description here
and send data to backend. And in backend, you can only see image name, am i right?
If so, here is my example code:
async submitFile() {
let filelist = [];
for (let i = 0; i < this.files.length; ++i) {
filelist.push(
await (async (cur) => {
return new Promise((resolve, reject) => {
const fr = new FileReader();
fr.onload = () => {
resolve(fr.result);
};
fr.readAsDataURL(cur);
});
})(this.files.item(i))
);
}
let formData = new FormData();
formData.append("files", filelist);
axios.post('/multiple-files', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function() {
console.log('SUCCESS!!');
})
.catch(function() {
console.log('FAILURE!!');
});
},
The focus is to use FileReader.readAsDataURL
to get the image as base64 encoded data. Then you have image data in the backend like this:
enter image description here
- [Vuejs]-How to Reload to same Page while sending a parameter?
- [Vuejs]-Vue-i18n: language dependent view
Source:stackexchange.com