码迷,mamicode.com
首页 > Web开发 > 详细

.Net Core 图片上传FormData和Base64

时间:2019-10-19 15:13:58      阅读:358      评论:0      收藏:0      [点我收藏+]

标签:ssd   技术   sda   流式   process   删除   append   direct   send   

缓冲流式传输是上传文件的两种常用方案,这里主要演示流式传输。

1.Net Core MVC Form提交方式:
前端页面 form表单提交:
 1 <form  id="uploadForm">
 2 图片上传: <input type="file" name="file" multiple value="选择"  onchange="doUpload()" id="ajaxfile" />
 3 </form>
 4 <script type="text/javascript">
 5             //图片上传
 6             function doUpload()
 7             {
 8             var formData = new FormData($("#uploadForm")[0]);
 9             $.ajax({
10                 url: @Url.Action("FileSave", "FileUpload"),
11                 type: POST,
12                 data: formData,
13                 async: false,
14                 cache: false,
15                 contentType: false,
16                 processData: false,
17                 success: function (returndata) {
18                     //成功后执行的方法
19                 },
20                 error: function (returndata) {
21                     //上传失败执行的方法
22                 }
23             });
24         }
25 </script>
后端方法:
采用的流式处理,请求收到文件,然后应用直接处理或者保存。这种传输无法提高性能,但优点是可降低上传时对内存或磁盘空间的需求。
通过流(stream)把请求收到的文件拷贝到系统指定的文件中。
 1  
 2         [HttpPost]
 3         public async Task<IActionResult> FileSave()
 4         {
 5             //获取Form提交的文件
 6             var files = Request.Form.Files;
 7             long size = files.Sum(f => f.Length);
 8             string webRootPath = _hostingEnvironment.WebRootPath; //物理路径
 9             string contentRootPath = _hostingEnvironment.ContentRootPath;
10             string showfilePath = "";
11             foreach (var formFile in files)
12             {
13                 if (formFile.Length > 0)
14                 {
15                     int count = formFile.FileName.Split(.).Length;
16                     string fileExt = formFile.FileName.Split(.)[count - 1]; //文件扩展名,不含“.”
17                     long fileSize = formFile.Length; //获得文件大小,以字节为单位
18                     string newFileName = System.Guid.NewGuid().ToString() + "." + fileExt;  //随机生成新的文件名
19                     #region 文件夹不存在则创建
20                     var filePath = webRootPath + "/upload";
21                     if (!Directory.Exists(filePath))
22                     {
23                         Directory.CreateDirectory(filePath);
24                     }
25                     #endregion
26                     #region 文件不存在则新建
27                     filePath = webRootPath + "/upload/" + newFileName;
28                     showfilePath = "upload/" + newFileName;
29                     FileHelper.CreateFile(filePath);
30                     #endregion
31                     //把上传的图片复制到指定的文件中
32                     using (var stream = new FileStream(filePath, FileMode.Create))
33                     {
34                         await formFile.CopyToAsync(stream);
35                     }
36                 }
37             }
38             return Ok(new { count = files.Count, savepath = showfilePath });
39         }
2.基于Base64的方式
前端用Vue提交,调用后端接口
vue提交用FormData方式,params方提交的参数会放到Url末尾,导致过长超出,这里用FormData的方式提交
提交时传递的参数要通过FormData对象来添加
Vue提交方法:
 1 //上传图片
 2 
 3 afterRead(file) {
 4   // 此时可以自行将文件上传至服务器
 5   let obj={};
 6   var imgurl=file.content
 7    //需要将文件的地址 需要去掉base64头部标签 这里简单用replace替换
 8   imgurl =  imgurl.replace("data:image/jpeg;base64,", "");
 9     //获取图片的格式
10   var Img=file.file.name.split(‘.‘)[1]
11   
12     //创建formdata对象 传递参数
13   var formdata=new FormData();
14   formdata.append("fileBase64",imgurl);//添加一条数据
15   formdata.append("fileExt",Img);//添加一条数据
16  
17   //ajax调用接口,ajax的参数配置
18   this.$ajax({
19     method: ‘post‘,
20     dataType:‘json‘,
21     url: "http://*****/FileUpload/UploadBase64",
22     contentType : false,// 告诉jQuery不要去设置Content-Type请求头
23     processData: false,// 告诉jQuery不要去处理发送的数据,
24     beforeSend : function(req) {
25       req.setRequestHeader(‘Content-Type‘, ‘application/json‘);  ///加这一行解决问题
26     },
27      data: formdata
28   }).then(res=>{
29     //图片上传成功后 执行的操作
30      var msg=res.data.msg
31       
32   }).catch(error =>{
33     console.log(error)
34   })
35 },

后端方法:原理和1基本相同

 1  [HttpPost]
 2        
 3         public string  UploadBase64(string fileBase64,string fileExt)
 4         {
 5             TableData data = new TableData();
 6             byte[] bytes = ToBytes_FromBase64Str(fileBase64);
 7             //var fileExtension = Path.GetExtension(fileName);
 8           
 9             string webRootPath = _hostingEnvironment.WebRootPath;
10             string newFileName = System.Guid.NewGuid().ToString() + "." + fileExt; //随机生成新的文件名
11             
12             var filePath = webRootPath + "/upload";
13             var RetfilePath =  "upload/" + newFileName;
14             if (!Directory.Exists(filePath))
15             {
16                 Directory.CreateDirectory(filePath);
17             }
18             filePath = webRootPath + "/upload/" + newFileName;
19             try
20             {
21                 data.code = 200;
22                 FileStream fs = new FileStream(filePath, FileMode.CreateNew);
23                 fs.Write(bytes, 0, bytes.Length);
24                 fs.Close();
25                 data.msg = RetfilePath;
26             }
27             catch (Exception ex)
28             {
29                 data.code = 500;
30                 data.msg = "newFileName:"+ newFileName+"Error:"+ex.Message;
31             }
32             return JsonHelper.Instance.Serialize(data);
33         }

附:FileHelper类 和TableData

 1  public static class FileHelper
 2     {
 3        
 4         /// <summary>
 5         /// 拷贝文件
 6         /// </summary>
 7         /// <param name="orignFile">原始文件</param>
 8         /// <param name="newFile">新文件路径</param>
 9         public static void FileCoppy(string orignFile, string newFile)
10         {
11             if (string.IsNullOrEmpty(orignFile))
12             {
13                 throw new ArgumentException(orignFile);
14             }
15             if (string.IsNullOrEmpty(newFile))
16             {
17                 throw new ArgumentException(newFile);
18             }
19             System.IO.File.Copy(orignFile, newFile, true);
20         }
21         /// <summary>
22         /// 删除文件
23         /// </summary>
24         /// <param name="path">路径</param>
25         public static void FileDel(string path)
26         {
27             if (string.IsNullOrEmpty(path))
28             {
29                 throw new ArgumentException(path);
30             }
31             System.IO.File.Delete(path);
32         }
33         /// <summary>
34         /// 移动文件
35         /// </summary>
36         /// <param name="orignFile">原始路径</param>
37         /// <param name="newFile">新路径</param>
38         public static void FileMove(string orignFile, string newFile)
39         {
40             if (string.IsNullOrEmpty(orignFile))
41             {
42                 throw new ArgumentException(orignFile);
43             }
44             if (string.IsNullOrEmpty(newFile))
45             {
46                 throw new ArgumentException(newFile);
47             }
48             System.IO.File.Move(orignFile, newFile);
49         }
50         //创建路径
51         public static void CreatePath(string FilePath)
52         {
53             if (!Directory.Exists(FilePath))
54             {
55                 Directory.CreateDirectory(FilePath);
56             }
57         }
58         //创建文件
59         public static void CreateFile(string FilePath)
60         {
61             if (!File.Exists(FilePath))
62             {
63                 FileStream fs = File.Create(FilePath);
64                 fs.Close();
65             }
66         }
67     }
 1    public class TableData
 2     {
 3         /// <summary>
 4         /// 状态码
 5         /// </summary>
 6         public int code;
 7         /// <summary>
 8         /// 操作消息
 9         /// </summary>
10         public string msg;
11         /// <summary>
12         /// 总记录条数
13         /// </summary>
14         public int count;
15         
16         /// <summary>
17         /// 数据内容
18         /// </summary>
19         public dynamic data;
20         public TableData()
21         {
22             code = 200;
23             msg = "加载成功";
24             
25         }
26     }

演示效果如下:

技术图片

 

 

 

 

 

.Net Core 图片上传FormData和Base64

标签:ssd   技术   sda   流式   process   删除   append   direct   send   

原文地址:https://www.cnblogs.com/ywkcode/p/11703523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!