栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用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");    }}

完美的作品。谢谢!



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/373790.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号