应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

net core base64上传图片

7730人阅读 2019/8/30 11:53 总访问:5194471 评论:2 收藏:0 手机
分类: .NET Core

前台

html:

  1. <div>
  2.     <input type="file" onchange="selectImage(this.files)" accept="">
  3. </div>

js:

  1. function selectImage(files{
  2.     let reader = new FileReader();
  3.     let file = files[0];
  4.     reader.readAsDataURL(file);
  5.     reader.onload = function ({
  6.         $.post('/Home/UpLoadFile', { filecontent: reader.result }, function (result{
  7.         });
  8.     }
  9. }


后端

base64转化的工具类:

  1. public class Base64Convert
  2.     {
  3.         /// <summary>
  4.         /// 文件转换成Base64字符串
  5.         /// </summary>
  6.         /// <param name="fileName">文件绝对路径</param>
  7.         /// <returns></returns>
  8.         public static String FileToBase64(string fileName)
  9.         {
  10.             string strRet = null;
  11.             try
  12.             {
  13.                 FileStream fs = new FileStream(fileName, FileMode.Open);
  14.                 byte[] bt = new byte[fs.Length];
  15.                 fs.Read(bt, 0, bt.Length);
  16.                 strRet = Convert.ToBase64String(bt);
  17.                 fs.Close();
  18.             }
  19.             catch (Exception ex)
  20.             {
  21.                 throw ex;
  22.             }
  23.             return strRet;
  24.         }
  25.         /// <summary>
  26.         /// Base64字符串转换成文件
  27.         /// </summary>
  28.         /// <param name="strInput">base64字符串</param>
  29.         /// <param name="fileName">保存文件的绝对路径</param>
  30.         /// <returns></returns>
  31.         public static bool Base64ToFileAndSave(string strInput, string fileName)
  32.         {
  33.             bool bTrue = false;
  34.             try
  35.             {
  36.                 byte[] buffer = Convert.FromBase64String(strInput);
  37.                 FileStream fs = new FileStream(fileName, FileMode.CreateNew);
  38.                 fs.Write(buffer, 0, buffer.Length);
  39.                 fs.Close();
  40.                 bTrue = true;
  41.             }
  42.             catch (Exception ex)
  43.             {
  44.                 throw ex;
  45.             }
  46.             return bTrue;
  47.         }
  48.     }

提交的控制器:

  1. public IActionResult UpLoadFile()
  2. {
  3.     string base64 = Request.Form["filecontent"];
  4.     //base64需要把前面的申明去掉
  5.     string newbase = base64.Replace("data:image/jpeg;base64,""");
  6.     //把图片存储到c盘,具体操作的时候位置可以自行改变
  7.     Base64Convert.Base64ToFileAndSave(newbase, "c://timg.jpg");
  8.     return View();
  9. }


优化一下

前台的时候把图片后缀名传过去

  1. <script>
  2.     function selectImage(files{
  3.         let reader = new FileReader();
  4.         let file = files[0];
  5.         console.log(file);
  6.         //取出来文件的后缀名(方便在后台保存的时候用)
  7.         var index = file.name.lastIndexOf(".");
  8.         var fileExt = file.name.substr(index + 1);
  9.         console.log(fileExt);
  10.         reader.readAsDataURL(file);
  11.         reader.onload = function ({
  12.             console.log(reader.result);
  13.             $.post('/Home/UpLoadFile', { filecontent: reader.result, fileExt: fileExt }, function (result{
  14.             });
  15.         }
  16.     }
  17. </script>

后台去掉前缀的方法换成正则表达式,因为格式不固定

  1. /// <summary>
  2. /// base64图片上传
  3. /// </summary>
  4. public void UpLoadFile()
  5. {
  6.     string base64 = Request.Form["filecontent"];
  7.     string fileExt = Request.Form["fileExt"];
  8.     #region base64需要把前面的申明去掉(当然前缀这个也可以放在前端处理)
  9.     //string newbase = base64.Replace("data:image/jpeg;base64,", "");
  10.     //这里用了一下正则表达式因为可能是格式data:image/jpeg;base64,data:image/png;base64等等
  11.     string base64img = Regex.Replace(base64, "data:image/.*;base64,""");
  12.     #endregion
  13. }

保存的时候图片名字用guid

  1. //把图片存储到c盘,具体操作的时候位置可以自行改变
  2. Base64Convert.Base64ToFileAndSave(base64img, "c://" + Guid.NewGuid().ToString().Replace("-""") +"."+ fileExt);









欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

ASP.net简单上传图片

图片上传的注意事项1:提交方式必须是post2:修改一下entype类型让他支持文件3:文件选择框必须要有一个名字publicvoidUpLoa...

.net core上传图片,文件。webapi 上传图片文件

上传图片的前台代码都完全一样,直接来贴后台的代码吧publicActionResultUploadImage(List&lt;IFormFile&gt;upfile) { ...

net core上传图片到七牛云

我们项目的静态资源如果想要获得加速就可以把图片哇,js,css这些静态资源放到cdn上,提高我们站点的访问速度。这里我们使用n...

ajaxSubmit异步上传图片(嘘,外面都是假的)

引用代码&lt;scriptsrc=&quot;/Scripts/jquery.form.js&quot;&gt;&lt;/script&gt;js就在旁边img链接中,只不过大小为0x0,...

AJAX调用webapi上传图片或文件。设置token,设置Authorization Bearer

AJAX调用webapi上传图片或文件,并返回刚上传的文件名。废话不多说直接贴代码吧html相关:&lt;!DOCTYPEhtml&gt; &lt;html&...

.net上传图片到七牛云

传送门:net core上传图片到七牛云地址:http://www.tnblog.net/aojiancc2/article/details/2441c# sdk地址:https://devel...

.net base64上传图片

前台&lt;div&gt; &lt;inputtype=&quot;file&quot;onchange=&quot;selectImage(this.files)&quot;accept=&quot;&quot;&gt; ...

Layui插件上传图片具体步奏以及获取图片地址

注意事项: (1)在使用插件之前需要引入该插件文件包不可分开使用。 (2)在运行过程中会出现报一个错误(上传图片异常等等...

微信上传图片和视频

前言Happy Birthday To You! ChenTingXian人的一生会遇到很多人,但心里能够一直有你的人却很少,承蒙时光不弃,让我遇到啦...

微信公众号上传图片,视频素材

一天休息,闲来无事,丈夫这是就问妻子说:“亲爱的老婆,你知道鱼为什么是哑巴吗?”,这是妻子也感到疑惑了,为什么鱼是...

.net core百度编辑器上传图片配置

.net core百度编辑器上传图片配置和.net framework还是有一点点区别publicActionResultUploadImage(List&lt;IFormFile&gt;f...

.net core gRPC base64上传图片文件

客户端前台&lt;div&gt; &lt;inputtype=&quot;file&quot;onchange=&quot;selectImage(this.files)&quot;accept=&quot;&quot...

.net core gRPC 客户端流式上传图片,文件。gRPC文件分段传输

html前台,完全一样:&lt;formmethod=&quot;post&quot;action=&quot;/home/UpLoadImgStream&quot;enctype=&quot;multipart/f...

.net core Base64上传图片

通用的图片上传工具类,直接上代码吧 图片转Base64可以看看剑哥 借鉴了剑哥的一些思路https://www.tnblog.net/aojianc...