火车站网站建设方案,吉安百度seo,wordpress 获取栏目名称,遮罩层怎么做网页阅读本文你的收获#xff1a;
了解WebApi项目保存上传图片的三种方式学习在WebApi项目中如何上传图片到指定文件夹中 在ASP.NET Core基础之图片文件(一)-WebApi访问静态图片文章中#xff0c;学习了如何获取WebApi中的静态图片#xff0c;本文继续分享如何上传图片。
那么…阅读本文你的收获
了解WebApi项目保存上传图片的三种方式学习在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 一. 创建并配置上传图片的文件夹
在WebApi项目上右击新建文件夹“Uploads” 在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接口
在控制器类的上面引用以下命名空间
using System.IO; //文件操作
using Microsoft.AspNetCore.Hosting; //ASPNET Core的托管环境控制器类里面写一个上传文件的api接口 /// summary/// 产品模块演示文件上传/// /summary[Route(api/[controller]/[action])][ApiController]public class ProductController : ControllerBase{/// summary/// 图片上传/// /summary/// param namefile/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 Liststring{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 上传图片成功 });}}用Swagger测试一下以上接口并在VS里面打断点调试看每一步的变化
三. 浏览器里面测试能否查看图片URL
在浏览器中访问上传的图片路径
四.VUE前端页面实现上传功能含信息提交功能 MVC视图中写一个添加页面Create.cshtml引入vue和axios两个js script src~/lib/axios.js/script
script src~/lib/vue.js/script在Create.cshtml上继续创建div模板 div idappformdivlabel产品标题/labelinput typetext v-modelformModel.title //divdivlabel产品图片/labelinput typefile v-on:changehandleFileChange //divinput typebutton v-on:clickadd value添加 /input typereset value重置 //form
/div在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实现单图片上传并保存到系统指定的文件夹。下次我们分享如何把图片保存到云存储服务中。 如果本文对你有帮助的话请点赞评论关注或者转发给需要的朋友。
