.Net Core WebApi上传图片的两种方式
我这边主要是为了上传图片，话不多说，上代码。
方式一：通过Form表单上传
后端：
/// <summary>
/// 上传图片,通过Form表单提交
/// </summary>
/// <returns></returns>
[Route("Upload/FormImg")]
[HttpPost]
public ActionResult UploadImg(List<IFormFile> files)
{
if (files.Count<1)
{
return Error("文件为空");
}
//返回的文件地址
List<string> filenames = new List<string>();
var now = DateTime.Now;
//文件存储路径
var filePath = string.Format("/Uploads/{0}/{1}/{2}/", now.ToString("yyyy"), now.ToString("yyyyMM"), now.ToString("yyyyMMdd"));
//获取当前web目录
var webRootPath = _hostingEnvironment.WebRootPath;
if (!Directory.Exists(webRootPath + filePath))
{
Directory.CreateDirectory(webRootPath + filePath);
}
try
{
foreach (var item in files)
{
if (item != null)
{
#region 图片文件的条件判断
//文件后缀
var fileExtension = Path.GetExtension(item.FileName); //判断后缀是否是图片
const string fileFilt = ".gif|.jpg|.jpeg|.png";
if (fileExtension == null)
{
break;
//return Error("上传的文件没有后缀");
}
if (fileFilt.IndexOf(fileExtension.ToLower(), StringComparison.Ordinal) <= -1)
{
break;
//return Error("请上传jpg、png、gif格式的图片");
} //判断文件大小
long length = item.Length;
if (length > 1024 * 1024 * 2) //2M
{
break;
//return Error("上传的文件不能大于2M");
} #endregion var strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff"); //取得时间字符串
var strRan = Convert.ToString(new Random().Next(100, 999)); //生成三位随机数
var saveName = strDateTime + strRan + fileExtension; //插入图片数据
using (FileStream fs = System.IO.File.Create(webRootPath + filePath + saveName))
{
item.CopyTo(fs);
fs.Flush();
}
filenames.Add(filePath + saveName);
}
}
return Success(filenames);
}
catch (Exception ex)
{
//这边增加日志，记录错误的原因
//ex.ToString();
return Error("上传失败");
}
}
我这里主要是为了提交图片数据，所以有比较多的对图片文件的条件判断，这里可以根据需求，自行调整。包括文件的存储方式。
前端：
<!DOCTYPE html>
<html>
<head>
<title>.Net Core WebApi图片上传</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.min.js"></script>
</head>
<body>
<h1>通过form表单提交</h1>
<form id="myform" name="myform" method="post" enctype="multipart/form-data"
action="https://localhost:44376/Upload/FormImg">
<input type="file" name="files" id="files" value="选择需要上传的文件" multiple />
<input type="button" id="submitbtn" value="提交" onclick="uplpadfile()">
</form> <div>
上传的图片，返回的地址
<div id="imglist">
</div> </div>
<script type="text/javascript">
//前端第一种提交方式
function uplpadfile(){
//获取表单的数据
var formdata
var file = $("#files").get(0);
var files = file.files;
var formdata = new FormData();
for (var i = 0; i < files.length; i++) {
formdata.append("files", files[i]);
} $.ajax({
type:'Post',
data:formdata,
contentType: false,
processData: false,
url:"https://localhost:44376/Upload/FormImg",
success:function(result){
if (result.Success) {
var imglist =result.Data;
for(var i in imglist){
$("#imglist").append('<img src="'+imglist[i]+'"/>');
}
}else{
alert('提交失败,重新尝试提交');
}
}
}) };
</script> </body>
</html>
除了上传写的提交方式，另外还有两种提交数据的方式：
方式二：
function uplpadfile(){
//获取表单的数据
var formdata = new FormData(document.getElementById("myform"));
$.ajax({
type:'Post',
data:formdata,
contentType: false,
processData: false,
url:"https://localhost:44376/Upload/FormImg",
success:function(result){
if (result.Success) {
var imglist =result.Data;
for(var i in imglist){
$("#imglist").append('<img src="'+imglist[i]+'"/>');
}
}else{
alert('提交失败,重新尝试提交');
}
}
})
};
</script>
方式三：
<script type="text/javascript">
function uplpadfile(){ $("#myform").ajaxSubmit(function(result){
if (result.Success) {
var imglist =result.Data;
for(var i in imglist){
$("#imglist").append('<img src="'+imglist[i]+'"/>');
}
}else{
alert('提交失败,重新尝试提交');
}
}); };
</script>
前端这里，要注意几点：
1、Form表中一定要加上 enctype="multipart/form-data" 标签
2、文件上传的 file 控件上，如果要一次上传多张图片，需要加上 multiple 标签
3、方式一中： formdata.append("files", files[i]) 的 files 必须和接口接受文件的参数名一致
4、方式二和方式三中：<input type="file" name="files"> 中的 name 必须和接口接受文件的参数名一致
通过Form提交文件的方式总结：
前端提交文件的三种方式都可以使用。
如果文件需要和表单中其他数据一起提交，可以使用方式二和方式三。
如果只要单独提交一个文件数据，可以使用方式一。
====================华丽的分割线====================
方式二：通过Base64字符上传
后端：
/// <summary>
/// 文件上传，Base64
/// </summary>
/// <param name="fileBase64">Base64</param>
/// <param name="fileName">文件名</param>
/// <returns></returns>
[HttpPost]
[Route("Upload/Base64")]
public ActionResult UploadBase64(string fileBase64, string fileName)
{
byte[] bytes = fileBase64.ToBytes_FromBase64Str();
var fileExtension = Path.GetExtension(fileName);
var strDateTime = DateTime.Now.ToString("yyMMddhhmmssfff"); //取得时间字符串
var strRan = Convert.ToString(new Random().Next(100, 999)); //生成三位随机数
var saveName = strDateTime + strRan + fileExtension;
var savePath = "Upload/Img/" + DateTime.Now.ToString("yyyyMMdd") + "/" + saveName;
string filePath = "https://oss.tiaobox.com/" + savePath;
try
{
//将文件上传到阿里云oss
using (MemoryStream m = new MemoryStream(bytes))
{
var client = new OssClient(aliyunconfig.EndPoint, aliyunconfig.AccessKeyID, aliyunconfig.AccessKeySecret);
PutObjectRequest _objRequest = new PutObjectRequest(aliyunconfig.BucketName, savePath, m);
client.PutObject(_objRequest);
}
return Success(filePath);
}
catch (Exception ex)
{
WriteSysLog(ex.ToString(), Entity.Base_SysManage.EnumType.LogType.接口调用异常);
return Error("上传失败！");
} }
这个后端方法，每次只能上传一个文件，前端需要把文件转成Base64的字符提交。
这里保存数据的方式，是保存到阿里云的OSS上，也可以采用上面的方法，保存的本地。最终都是返回文件的路径。
前端：
<!DOCTYPE html>
<html>
<head>
<title>.Net Core WebApi图片上传</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.min.js"></script>
</head>
<body>
<h1>通过文件转为Base64字符提交</h1> <input type="file" name="basefile" id="basefile" value="选择需要上传的文件" multiple /> <script type="text/javascript">
$("#basefile").change(function(){
var basefile = base64(document.getElementById("basefile"));
}) //上传文件
function updateBackground(filename,imgurl){ //提交前，去除格式标记
imgurl = imgurl.replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "").replace("data:image/jpg;base64,", "").replace("data:image/gif;base64,", "").replace("data:image/bmp;base64,", "");
// urlElement.innerHTML = imgurl;
var businessParam = {
fileBase64:imgurl,
fileName:filename
}; $.ajax({
url:'https://localhost:44376/Upload/Base64',
data:businessParam,
type:'post',
dataType:'json',
success:function(result){
if (result.Success) {
alert("上传成功");
}else{
alert("上传失败");
}
},
error: function(data) {
alert("error:"+data.Error);
}
}) } //文件转为Base64
function base64(file) {
if (typeof (FileReader) === 'undefined') {
alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
}
var reader = new FileReader();
var pos = file.files[0].name.lastIndexOf(".");
var type = file.files[0].name.substring(pos + 1);
//判断文件格式
if (type.toLowerCase() != "png" && type.toLowerCase() != 'jpg' && type.toLowerCase() != 'jpeg' && type.toLowerCase() != 'gif' && type.toLowerCase() != 'bmp') {
alert("格式错误，请上传'png、jpg、jpeg、bmp、gif'格式文件");
return;
} reader.onloadend = (
function(e) {
imgurl = e.target.result;
updateBackground(file.files[0].name,imgurl);
}
);
// Read the file
reader.readAsDataURL(file.files[0]); }
</script>
</body>
</html>
这里需要注意的是文件在前端转成Base64字符后，需要在字符的前面去掉文件的格式标签。不然到后端会无法正常读取Base64的字符。
或者在后端接收数据后，做处理也可以。
补充：
_hostingEnvironment的定义
private readonly IHostingEnvironment _hostingEnvironment;
public UploadController(IHostingEnvironment hostingEnvironment,IOptions<AliyunConfig> _aliyunconfig)
{
_hostingEnvironment = hostingEnvironment;
aliyunconfig = _aliyunconfig.Value;
}
ToBytes_FromBase64Str 是对 String 类的方法扩展
public static byte[] ToBytes_FromBase64Str(this string base64Str)
{
return Convert.FromBase64String(base64Str);
}
如果有什么错误或者欠缺的地方，欢迎指正，互相学习。
文章参考，里面还有讲述关于大文件的上传：
https://www.cnblogs.com/seabluescn/p/9229760.html
转：https://www.cnblogs.com/leoxuan/articles/11087121.html
.Net Core WebApi上传图片的两种方式的更多相关文章
- webapi上传图片的两种方式
/// <summary> /// App上传图片 /// </summary> /// <returns>返回上传图片的 ...
- Android上传图片的两种方式
参考:https://www.jianshu.com/p/f47943880cea
- Debugging into .NET Core源代码的两种方式
一.前言 .NET开源时间还不长,因为一直在做YOYOFx的关系,所似我常常有更深入的了解.NET Core和ASP.NET Core内容的需求,并且.NET Core平台与之前版本的变化太大,这也导 ...
- EntityFramework Core 2.0自定义标量函数两种方式
前言 上一节我们讲完原始查询如何防止SQL注入问题同时并提供了几种方式.本节我们继续来讲讲EF Core 2.0中的新特性自定义标量函数. 自定义标量函数两种方式 在EF Core 2.0中我们可以将 ...
- [转]Debugging into .NET Core源代码的两种方式
本文转自:http://www.cnblogs.com/maxzhang1985/p/6015719.html 阅读目录 一.前言 二.符号服务器 三.项目中添加ASP.NET Core源代码 四.写 ...
- 国产化之 .NET Core 操作达梦数据库DM8的两种方式
背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,数据库使用达梦V8,CPU平台的范围包括x64.龙芯.飞腾.鲲鹏等.考虑到这些基础产品对.NET的支持,最终选择了.NET Core ...
- python利用mongodb上传图片数据 : GridFS 与 bson两种方式
利用mongodb保存图片通常有两种方法,一种是将图片数据转化为二进制作为字典的键值对进行保存,另一种是利用mongodb提供的GridFS进行保存,两者各有利弊.性能方面的优劣未曾测试,无法进行评价 ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
- 《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式（如：文件）
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
随机推荐
- JVM命令jps
jps是JVM的一个常用命令,类似linux中的ps命令.jps是查看java进程信息的命令:ps是查看linux系统中进程的命令 格式 jps [ options ] [ host ...
- 平衡树treap 0基础详解
刚开始学treap..同学在台上给我们讲,貌似除我之外的机房dalao们都听懂了就我发呆...(滑稽) 于是,事后的窝只能自己上网翻书研究了.... treap: treap=tree+heap,树+ ...
- 前端知识体系：JavaScript基础-原型和原型链-实现继承的几种方式以及他们的优缺点
实现继承的几种方式以及他们的优缺点(参考文档1.参考文档2.参考文档3) 要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链:每一 ...
- JS 中获取服务器时间的注意点
在通过js获取服务器时间时,遇到了小小的问题,但造成的影响挺大的,所以写出来提醒大家,在获取服务器时间时一定要细心要多测试多验证. js 中使用以下方法获取服务器时间时要注意两点: 1.xhr.ope ...
- Luogu P2146 [NOI2015]软件包管理器 树剖
卸载:把子树清空: 安装:把自己到$1$的链改为$1$ #include<cstdio> #include<iostream> #include<cstring> ...
- gcc/g++以c++11编译
方法一: //在程序头加上预定义编译器命令 #pragma GCC diagnostic error "-std=c++11" //通过#pragma 指示 GCC编译器处理错误的 ...
- python 垃圾回收笔记
目录 引用计数 python内部的引用计数机制 循环引用 调试内存泄漏 总结 python 程序在运行的时候,需要在内存中开辟出一块空间,用于存放运行时产生的临时变量:计算完成后,再将结果输出到永久性 ...
- SpringMVC——拦截器，过滤器实现登录拦截
一.拦截器与过滤器的区别 1.过滤器 依赖于servlet容器.在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次.使用过滤器的目的是用来做一些过滤操 ...
- Django常见命令
在Django的使用过程中需要使用命令让Django进行一些操作,例如创建Django项目,启动Django程序,创建新的APP,数据库迁移等. 1. 创建Django项目 新建一个文件夹来存放项目文 ...
- mounted里面this.$refs.xxx的内容是undefined
在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? DOM结构已经渲染出来了,但是如果在DOM结构中的某个DOM节点使用了v-if.v-show或者v ...