文件上传 – 在ASP.NET Core中使用Axios和Vue.JS进行多个文件上载

我正在尝试使用vue.js和axios上传多个文件/图像.我的后端是ASP.NET Core.但问题是,每当我在我的请求方法中放置断点时,我总是在我的控制器中得到一个Count = 0.

这是我的简单HTML和我的代码：

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>

我的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);
            });
    },}

我的控制器

public IActionResult Upload(IList<IFormFile> files)
{
    return Json("Hey");
}

有什么帮助吗？

解决方法

这个github回购可能对你有帮助 ASP.NET Core FileUpload with Vue.JS & Axios

基本上,他使用IFormCollection文件而不是IList< IFormFile>档