如何使用axios将文件上传到ASP.NET控制器

Question

1. 我使用此函数在html中渲染图像上传器。从而在页面中正确地显示图像。我应该如何将此FileReader发布到控制器

showCoverImage(e) {

var file = e.target.files[0];

var imageType = /image.*/;

if (!file.type.match(imageType)) {
return;
}

var img = document.getElementById("thumbnail");
img.file = file;

const fileName = document.querySelector('#cover-image .file-name');
fileName.textContent = file.name;

var reader = new FileReader();
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}

2. 我有使用IFromFIle上传的控制器方法。它接收IFromFIle作为参数

[HttpPost("/upload/coverImage")]
public async Task<IActionResult> uploadEditorImage(IFormFile upload)
{
var fileName = upload.FileName;
var path = Path.Combine(_mainDirectory, "images");
var pathPath = Path.Combine(path, fileName);

int isUpload = 1;
string errorMsg = string.Empty;
try
{
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}

var stream = new FileStream(pathPath, FileMode.Create);

await upload.CopyToAsync(stream);

await stream.FlushAsync();


return new JsonResult(new {uploaded:1});
}

3. 使用axios上传调用。它以null的形式发布到控制器IFromFile

onCoverImageUpload() {
this.loading = true;
const formData = new FormData();
formData.append("file", this.selectedCoverImage);
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
axios.post('/upload/coverImage', formData, config)
.then(res => {
console.log(res);
});
}

Answer 1

首先，确保您可以通过this.selectedCoverImage获取文件。

其次，名称不一致。将表单Data中的名称file更改为upload

formData.append("upload", this.selectedCoverImage);

Answer 2

最后我更改了控制器的实现。正在工作。

[HttpPost("/upload/coverImage")] 
public async Task<IActionResult> uploadEditorImage()
{ 
var upload = Request.Form.Files[0];
var fileName = upload.FileName; 
var path = Path.Combine(_mainDirectory, "images"); 
var pathPath = Path.Combine(path, fileName); 
string errorMsg = string.Empty; 
try { 
if (!Directory.Exists(path)) {
Directory.CreateDirectory(path);
}
var stream = new FileStream(pathPath, FileMode.Create); 
await upload.CopyToAsync(stream); 
await stream.FlushAsync(); 
return new JsonResult(new {uploaded:1}); 
}