緩沖和流式傳輸是上傳文件的兩種常用方案，這里主要演示流式傳輸。
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 }
演示效果如下：
