阅读本文你的收获:

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

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

那么,上传的图片应该存放到什么位置?

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

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

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

开发环境:

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

  1. 在WebApi项目上右击,新建文件夹“Uploads”
    ASP.NET Core基础之图片文件(一)-WebApi图片文件上传到文件夹-LMLPHP
  2. 在Program.cs中配置静态文件中间件

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

//引用命名空间
using Microsoft.Extensions.FileProviders;

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

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

  1. 在控制器类的上面,引用以下命名空间
using System.IO; //文件操作
using Microsoft.AspNetCore.Hosting; //ASPNET Core的托管环境
  1. 控制器类里面写一个上传文件的api接口
 /// <summary>
 /// 产品模块(演示文件上传)
 /// </summary>
 [Route("api/[controller]/[action]")]
 [ApiController]
 public class ProductController : ControllerBase
 {
     /// <summary>
     /// 图片上传
     /// </summary>
     /// <param name="file"></param>
     /// <returns></returns>
     [HttpPost]
     public IActionResult UploadFile(IFormFile file,                         //文件对象
                                    [FromServices] IWebHostEnvironment env)  //局部注入主机环境对象
     {
         //检查文件大小
         if (file.Length == 0)
         {
             return BadRequest(new { Code = 1001, Msg = "未上传文件" });
         }
         //获取文件的MIME类型
         var mimeType = file.ContentType;
         // 定义一些常见的图片MIME类型  
         var imageMimeTypes = new List<string>
         {
             "image/jpeg",
             "image/png",
             "image/gif"  
             // 可以根据需要添加其他图片MIME类型
             //,"image/bmp"
             //,"image/tiff"
             //,"image/webp"  
         };

         // 检查文件的MIME类型是否在图片MIME类型列表中  
         if (!imageMimeTypes.Contains(mimeType))
         {
             return BadRequest(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 = new FileStream(fullPath, FileMode.Create))
         {
             file.CopyTo(fs); //把上传的文件file拷贝到fs里
             fs.Flush();      //刷新fs文件缓存区
         };

         //返回上传后的 相对路径
         return Ok(new { Data = relPath.Replace("\\", "/"), Code = 2001, Msg = "上传图片成功" });
     }
 }
  1. 用Swagger测试一下以上接口,并在VS里面打断点调试,看每一步的变化
    ASP.NET Core基础之图片文件(一)-WebApi图片文件上传到文件夹-LMLPHP

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

在浏览器中访问上传的图片路径
ASP.NET Core基础之图片文件(一)-WebApi图片文件上传到文件夹-LMLPHP

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

  1. MVC视图中写一个添加页面Create.cshtml,引入vue和axios两个js

    <script src="~/lib/axios.js"></script>
    <script src="~/lib/vue.js"></script>
    
  2. 在Create.cshtml上继续创建div模板

    <div id="app">
        <form>
            <div><label>产品标题:</label><input type="text" v-model="formModel.title" /></div>
            <div><label>产品图片:</label><input type="file" v-on:change="handleFileChange" /></div>
            <input type="button" v-on:click="add" value="添加" />
            <input type="reset" value="重置" />
        </form>
    </div>
    
  3. 在Create.cshtml上的< script >标签中创建Vue的实例
    需要在methods中,实现以上div中 绑定的change事件方法 handleFileChange和add方法
    需要在data中定义以上< form >标签中,v-model所绑定的字段formModel.XXXX

    <script>
    var vm = new Vue({
        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 = new FormData();
                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实现单图片上传并保存到系统指定的文件夹。下次我们分享如何把图片保存到云存储服务中。
如果本文对你有帮助的话,请点赞+评论+关注,或者转发给需要的朋友。

01-04 06:44