使用ASP.Net Core 2.0 Web API和React.js上传文件

使用ASP.Net Core 2.0 Web API和React.js上传文件

我已经完成了以下工作：

在.Net Core 2.0 Web API

使用Microsoft.AspNetCore.Http;

我创建了一个模型课

namespace Marter_MRM.Models{    public class FileUploadViewModel    {        public IFormFile File { get; set; }        public string source { get; set; }        public long Size { get; set; }        public int Width { get; set; }        public int Height { get; set; }        public string Extension { get; set; }    }}

然后，我创建了一个控制器类，并按如下所示编写了函数。

[HttpPost][Route("upload")]public async Task<IActionResult> Upload(FileUploadViewModel model) {      var file = model.File;      if (file.Length > 0) {string path = Path.Combine(_env.WebRootPath, "uploadFiles");using (var fs = new FileStream(Path.Combine(path, file.FileName), FileMode.Create)){     await file.CopyToAsync(fs);}model.source = $"/uploadFiles{file.FileName}";model.Extension = Path.GetExtension(file.FileName).Substring(1);      }    return BadRequest();}

并在react中编写api调用函数，如下所示：

handleUploadClick(event){    event.preventDefault();    var self = this;    var apibaseUrl =  axios.defaults.baseURL + "user/upload";    if(this.state.filesToBeSent.length>0){        var filesArray = this.state.filesToBeSent;        let f = new FormData();        for(var i in filesArray){        //console.log("files",filesArray[i][0]);  f = new FormData();  f.append("File",filesArray[i][0] )  axios.post(apibaseUrl, f, {         headers: {'Content-Type': 'multipart/form-data'}  });        }        alert("File upload completed");    }    else{        alert("Please select files first");    }}

完美的作品。谢谢！