在 ASP.NET Core 中使用 Axios 和 Vue.JS 进行多文件上传
Posted
技术标签:
【中文标题】在 ASP.NET Core 中使用 Axios 和 Vue.JS 进行多文件上传【英文标题】:Multiple File Upload using Axios & Vue.JS in ASP.NET Core 【发布时间】:2018-08-27 13:56:32 【问题描述】:我正在尝试使用 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");
有什么帮助吗?
【问题讨论】:
这是什么@@click
?
在 ASP.NET Core Razor 中,它相当于@。只是 Razor 的约定,所以我们使用 @@ 而不是 @。但它的工作原理
尝试检查浏览器网络是否正确发送了请求并带有相应的文件数据。
我也面临同样的问题。除了下面答案中的链接之外还有什么运气吗?
【参考方案1】:
我遇到了同样的问题。对我来说,解决方法是查看请求。您会看到有一个 Form 属性,其中有您的文件。这是一个对我有用的代码 sn-p。
并在应得的地方给予赞扬:我找到了答案on this blog post。这是关于 Angular 的,代码 sn-p 来自那里。
[HttpPost]
public IActionResult UploadLogo()
try
var file = Request.Form.Files[0];
string folderName = "Upload";
string webRootPath = _hostingEnvironment.WebRootPath;
string newPath = Path.Combine(webRootPath, folderName);
if (!Directory.Exists(newPath))
Directory.CreateDirectory(newPath);
if (file.Length > 0)
string fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
string fullPath = Path.Combine(newPath, fileName);
using (var stream = new FileStream(fullPath, FileMode.Create))
file.CopyTo(stream);
return Json("Upload Successful");
catch (System.Exception ex)
return Json("Upload Failed: " + ex.Message);
【讨论】:
【参考方案2】:这个 github repo 可能对你有帮助 ASP.NET Core FileUpload with Vue.JS & Axios
基本上,他使用IFormCollection files
而不是IList<IFormFile> files
【讨论】:
经过多次头部撞击后,参数中的微小差异完美运行,谢谢,希望我在 4 小时前找到这个以上是关于在 ASP.NET Core 中使用 Axios 和 Vue.JS 进行多文件上传的主要内容,如果未能解决你的问题,请参考以下文章
从 Axios 请求返回 ASP.NET Core API 中的下载文件
以 axios.post 形式接收 asp.net core web api 中的数组
ASP.NET Core 3.1 Web Api HttpPost Action 参数无法接收 axios application/json HttpPost 传递数据
在 ASP .NET Core 2.1 Web Api 中启用 CORS