ASP.NET Core基础之图片文件(二)-WebApi图片文件上传到文件夹

阅读本文你的收获：

1. 了解WebApi项目保存上传图片的三种方式
2. 学习在WebApi项目中如何上传图片到指定文件夹中

在ASP.NET Core基础之图片文件(一)-WebApi访问静态图片文章中，学习了如何获取WebApi中的静态图片，本文继续分享如何上传图片。

那么，上传的图片应该存放到什么位置？

在ASP.NET Core Web API中，通常将上传的图片存储在以下目录之一：

• 【方案1】系统中的特定文件夹：比如创建一个Uploads文件夹，并将其配置为应用程序的静态文件目录。这样就可以将上传的图片保存在该文件夹中。
• 【方案2】数据库：可以将上传的图片存储在数据库中。
• 【方案3】云存储服务：如果想将图片存储在远程服务器上，可以使用云存储服务（如阿里云OSS、七牛云、Microsoft Azure Blob Storage等）来存储上传的图片。也可以搭建自己的私有云存储服务器。

以上三种方案需要根据具体的需要进行选择，以下案例演示的是【方案1】，即上传到应用系统服务器的特定文件夹下面。

开发环境：

操作系统： Windows 10 专业版
平台版本是：.NET 6
开发框架：ASP.NET Core WebApi
开发工具：Visual Studio 2022

一. 创建并配置上传图片的文件夹

1. 在WebApi项目上右击，新建文件夹“Uploads”
2. 在Program.cs中配置静态文件中间件

采用自定义配置StaticFileOptions，把文件存放到Uploads文件夹中。

//引用命名空间usingMicrosoft.Extensions.FileProviders;

app.UseStaticFiles(newStaticFileOptions{//例如保存到网站根目录 {content root}/Files下面,可以用Path.Combine方法拼接路径
      FileProvider =newPhysicalFileProvider(Path.Combine(app.Environment.ContentRootPath,"Uploads")),
      RequestPath ="/uploads"//配置请求路径});

二.编写上传图片的WebApi接口

1. 在控制器类的上面，引用以下命名空间

usingSystem.IO;//文件操作usingMicrosoft.AspNetCore.Hosting;//ASPNET Core的托管环境

1. 控制器类里面写一个上传文件的api接口

/// <summary>/// 产品模块（演示文件上传）/// </summary>[Route("api/[controller]/[action]")][ApiController]publicclassProductController:ControllerBase{/// <summary>/// 图片上传/// </summary>/// <param name="file"></param>/// <returns></returns>[HttpPost]publicIActionResultUploadFile(IFormFile file,//文件对象[FromServices]IWebHostEnvironment env)//局部注入主机环境对象{//检查文件大小if(file.Length ==0){returnBadRequest(new{ Code =1001, Msg ="未上传文件"});}//获取文件的MIME类型var mimeType = file.ContentType;// 定义一些常见的图片MIME类型  var imageMimeTypes =newList<string>{"image/jpeg","image/png","image/gif"// 可以根据需要添加其他图片MIME类型//,"image/bmp"//,"image/tiff"//,"image/webp"  };// 检查文件的MIME类型是否在图片MIME类型列表中  if(!imageMimeTypes.Contains(mimeType)){returnBadRequest(new{ Code =1002, Msg ="上传的文件不是图片"});}//拼接上传的文件路径string fileExt = Path.GetExtension(file.FileName);//获取文件扩展名string fileName = Guid.NewGuid().ToString("N")+ fileExt;//生成全球唯一文件名string relPath = Path.Combine(@"\uploads", fileName);//拼接相对路径string fullPath = Path.Combine(env.ContentRootPath,"Uploads", fileName);//拼接绝对路径//创建文件using(FileStream fs =newFileStream(fullPath, FileMode.Create)){
             file.CopyTo(fs);//把上传的文件file拷贝到fs里
             fs.Flush();//刷新fs文件缓存区};//返回上传后的 相对路径returnOk(new{ Data = relPath.Replace("\\","/"), Code =2001, Msg ="上传图片成功"});}}

1. 用Swagger测试一下以上接口，并在VS里面打断点调试，看每一步的变化

三. 浏览器里面测试能否查看图片URL

在浏览器中访问上传的图片路径

四.VUE前端页面实现上传功能（含信息提交功能）

1. MVC视图中写一个添加页面Create.cshtml，引入vue和axios两个js<scriptsrc="~/lib/axios.js"></script><scriptsrc="~/lib/vue.js"></script>
2. 在Create.cshtml上继续创建div模板<divid="app"><form><div><label>产品标题：</label><inputtype="text"v-model="formModel.title"/></div><div><label>产品图片：</label><inputtype="file"v-on:change="handleFileChange"/></div><inputtype="button"v-on:click="add"value="添加"/><inputtype="reset"value="重置"/></form></div>
3. 在Create.cshtml上的< script >标签中创建Vue的实例 需要在methods中，实现以上div中 绑定的change事件方法 handleFileChange和add方法 需要在data中定义以上< form >标签中，v-model所绑定的字段formModel.XXXX<script>var vm =newVue({el:'#app',data:{files:[],//文件列表formModel:{//表单模型（重要：里面的字段名称和数据库表的名称必须一致）title:'',filePath:'',//上传之后添加的相对路径}},methods:{//实现文件上传，并接口返回的图片路径handleFileChange(e){//1.调试输出//console.log("handleFileChange方法进来了")//console.log(e.target.files);//2. e.target.files赋值给data里定义的files数组this.files = e.target.files;//生成post请求所需要的data数据var fdata =newFormData(); fdata.append("file",this.files[0]);//调用API接口，上传图片axios({url:'https://localhost:5001/api/Product/UploadFile',//api接口地址method:'POST',data: fdata }).then((res)=>{//api调用成功之后的回调函数//调试一下是否拿到了数据 console.log(res.data);if(res.data.code ==2001){//上传成功，则把图片的URL路径保存到formModel里this.formModel.filePath = res.data.data;}});},add(){//调用API接口，进行删除axios({url:'https://localhost:7186/api/Product/Create',//api接口地址method:'POST',data:this.formModel }).then((res)=>{if(res.data.code ==2001){//跳转 location.href ="Index";}});}},mounted(){//挂载事件//在这里可以加载绑定下拉}});</script>

本文演示了ASP.NET Core WebApi实现单图片上传并保存到系统指定的文件夹。下次我们分享如何把图片保存到云存储服务中。
如果本文对你有帮助的话，请点赞+评论+关注，或者转发给需要的朋友。