I'm trying to upload a multiple files/images using vue.js and axios. My backend is ASP.NET Core. But the problem is, whenever I put breakpoint in my request method, I always get a Count = 0 in my controller.
Here are my simple HTML and my codes:
HTML
<div id="app">
<form enctype="multipart/form-data">
<input type="file" name="file" multiple="" v-on:change="fileChange($event.target.files)"/>
<button type="button" @@click="upload()">Upload</button>
</form>
</div>
My JS
import axios from "axios"
var app= new Vue({
el: "#app",
data: {
files: new FormData()
},
methods:{
fileChange(fileList) {
this.files.append("file", fileList[0], fileList[0].name);
},
upload() {
const files = this.files;
axios.post(`/MyController/Upload`, files,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
alert(response.data);
}).catch(error => {
console.log(error);
});
},
}
My Controller
public IActionResult Upload(IList<IFormFile> files)
{
return Json("Hey");
}
Any help please?
Assuming that you want to send multiple files from the front-end, i.e., the React app, to the server using Axios. For that, there are two approaches as shown below: Send multiple requests while attaching a single file in each request. Send a single request while attaching multiple files in that request itself.
This github repo might be helpful for you ASP.NET Core FileUpload with Vue.JS & Axios
Basically, he used the IFormCollection files
instead of IList<IFormFile> files
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With