Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple File Upload using Axios & Vue.JS in ASP.NET Core

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?

like image 764
jsonGPPD Avatar asked Mar 19 '18 04:03

jsonGPPD


People also ask

How do I send multiple files in Axios?

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.


1 Answers

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

like image 118
mark333...333...333 Avatar answered Oct 02 '22 22:10

mark333...333...333