.Net Core 图片上传FormData和Base64

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

1.Net Core MVC Form提交方式：

前端页面 form表单提交:

 <form  id="uploadForm">
 图片上传： <input type="file" name="file" multiple value="选择"  onchange="doUpload()" id="ajaxfile" />
 </form>
 <script type="text/javascript">
             //图片上传
             function doUpload()
             {
             var formData = new FormData($("#uploadForm")[]);
             $.ajax({
                 url: '@Url.Action("FileSave", "FileUpload")',
                 type: 'POST',
                 data: formData,
                 async: false,
                 cache: false,
                 contentType: false,
                 processData: false,
                 success: function (returndata) {
                     //成功后执行的方法
                 },
                 error: function (returndata) {
                     //上传失败执行的方法
                 }
             });
         }
 </script>

后端方法：

采用的流式处理，请求收到文件，然后应用直接处理或者保存。这种传输无法提高性能，但优点是可降低上传时对内存或磁盘空间的需求。

通过流（stream）把请求收到的文件拷贝到系统指定的文件中。

         [HttpPost]
         public async Task<IActionResult> FileSave()
         {
             //获取Form提交的文件
             var files = Request.Form.Files;
             long size = files.Sum(f => f.Length);
             string webRootPath = _hostingEnvironment.WebRootPath; //物理路径
             string contentRootPath = _hostingEnvironment.ContentRootPath;
             string showfilePath = "";
             foreach (var formFile in files)
             {
                 if (formFile.Length > )
                 {
                     int count = formFile.FileName.Split('.').Length;
                     string fileExt = formFile.FileName.Split('.')[count - ]; //文件扩展名，不含“.”
                     long fileSize = formFile.Length; //获得文件大小，以字节为单位
                     string newFileName = System.Guid.NewGuid().ToString() + "." + fileExt;  //随机生成新的文件名
                     #region 文件夹不存在则创建
                     var filePath = webRootPath + "/upload";
                     if (!Directory.Exists(filePath))
                     {
                         Directory.CreateDirectory(filePath);
                     }
                     #endregion
                     #region 文件不存在则新建
                     filePath = webRootPath + "/upload/" + newFileName;
                     showfilePath = "upload/" + newFileName;
                     FileHelper.CreateFile(filePath);
                     #endregion
                     //把上传的图片复制到指定的文件中
                     using (var stream = new FileStream(filePath, FileMode.Create))
                     {
                         await formFile.CopyToAsync(stream);
                     }
                 }
             }
             return Ok(new { count = files.Count, savepath = showfilePath });
         }

2.基于Base64的方式

前端用Vue提交，调用后端接口

vue提交用FormData方式，params方提交的参数会放到Url末尾，导致过长超出,这里用FormData的方式提交

提交时传递的参数要通过FormData对象来添加

Vue提交方法：

 //上传图片

 afterRead(file) {
   // 此时可以自行将文件上传至服务器
   let obj={};
   var imgurl=file.content
    //需要将文件的地址 需要去掉base64头部标签 这里简单用replace替换
   imgurl =  imgurl.replace("data:image/jpeg;base64,", "");
     //获取图片的格式
   var Img=file.file.name.split('.')[1]

     //创建formdata对象 传递参数
   var formdata=new FormData();
   formdata.append("fileBase64",imgurl);//添加一条数据
   formdata.append("fileExt",Img);//添加一条数据

   //ajax调用接口，ajax的参数配置
   this.$ajax({
     method: 'post',
     dataType:'json',
     url: "http://*****/FileUpload/UploadBase64",
     contentType : false,// 告诉jQuery不要去设置Content-Type请求头
     processData: false,// 告诉jQuery不要去处理发送的数据,
     beforeSend : function(req) {
       req.setRequestHeader('Content-Type', 'application/json');  ///加这一行解决问题
     },
      data: formdata
   }).then(res=>{
     //图片上传成功后 执行的操作
      var msg=res.data.msg

   }).catch(error =>{
     console.log(error)
   })
 },

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

  [HttpPost]

         public string  UploadBase64(string fileBase64,string fileExt)
         {
             TableData data = new TableData();
             byte[] bytes = ToBytes_FromBase64Str(fileBase64);
             //var fileExtension = Path.GetExtension(fileName);

             string webRootPath = _hostingEnvironment.WebRootPath;
             string newFileName = System.Guid.NewGuid().ToString() + "." + fileExt; //随机生成新的文件名

             var filePath = webRootPath + "/upload";
             var RetfilePath =  "upload/" + newFileName;
             if (!Directory.Exists(filePath))
             {
                 Directory.CreateDirectory(filePath);
             }
             filePath = webRootPath + "/upload/" + newFileName;
             try
             {
                 data.code = ;
                 FileStream fs = new FileStream(filePath, FileMode.CreateNew);
                 fs.Write(bytes, , bytes.Length);
                 fs.Close();
                 data.msg = RetfilePath;
             }
             catch (Exception ex)
             {
                 data.code = ;
                 data.msg = "newFileName:"+ newFileName+"Error:"+ex.Message;
             }
             return JsonHelper.Instance.Serialize(data);
         }

附:FileHelper类 和TableData类

  public static class FileHelper
     {

         /// <summary>
         /// 拷贝文件
         /// </summary>
         /// <param name="orignFile">原始文件</param>
         /// <param name="newFile">新文件路径</param>
         public static void FileCoppy(string orignFile, string newFile)
         {
             if (string.IsNullOrEmpty(orignFile))
             {
                 throw new ArgumentException(orignFile);
             }
             if (string.IsNullOrEmpty(newFile))
             {
                 throw new ArgumentException(newFile);
             }
             System.IO.File.Copy(orignFile, newFile, true);
         }
         /// <summary>
         /// 删除文件
         /// </summary>
         /// <param name="path">路径</param>
         public static void FileDel(string path)
         {
             if (string.IsNullOrEmpty(path))
             {
                 throw new ArgumentException(path);
             }
             System.IO.File.Delete(path);
         }
         /// <summary>
         /// 移动文件
         /// </summary>
         /// <param name="orignFile">原始路径</param>
         /// <param name="newFile">新路径</param>
         public static void FileMove(string orignFile, string newFile)
         {
             if (string.IsNullOrEmpty(orignFile))
             {
                 throw new ArgumentException(orignFile);
             }
             if (string.IsNullOrEmpty(newFile))
             {
                 throw new ArgumentException(newFile);
             }
             System.IO.File.Move(orignFile, newFile);
         }
         //创建路径
         public static void CreatePath(string FilePath)
         {
             if (!Directory.Exists(FilePath))
             {
                 Directory.CreateDirectory(FilePath);
             }
         }
         //创建文件
         public static void CreateFile(string FilePath)
         {
             if (!File.Exists(FilePath))
             {
                 FileStream fs = File.Create(FilePath);
                 fs.Close();
             }
         }
     }

    public class TableData
     {
         /// <summary>
         /// 状态码
         /// </summary>
         public int code;
         /// <summary>
         /// 操作消息
         /// </summary>
         public string msg;
         /// <summary>
         /// 总记录条数
         /// </summary>
         public int count;

         /// <summary>
         /// 数据内容
         /// </summary>
         public dynamic data;
         public TableData()
         {
             code = ;
             msg = "加载成功";

         }
     }

演示效果如下：