檔案上傳屬于常見業務，很多地方都用的到(比如圖片上傳);
確切的說，這里的“本地”是指的專案所在的服務端，只是在專案服務端再次請求另外一個服務端進行檔案二次上傳，
比如：我們上傳圖片的時候，請求專案的服務器需要上傳一份，同時還要上傳一份到cdn服務器，
示例使用控制元件： el-upload 作為演示
1 <style> 2 .uploader { 3 border: 1px dashed #d9d9d9; 4 border-radius: 6px; 5 cursor: pointer; 6 position: relative; 7 overflow: hidden; 8 } 9 10 .uploader:hover { 11 border-color: #409EFF; 12 } 13 14 .avatar-uploader-icon { 15 font-size: 28px; 16 color: #8c939d; 17 text-align: center; 18 } 19 20 .banners-size { 21 width: 280px; 22 height: 120px; 23 line-height: 120px; 24 } 25 26 .avatar-banners { 27 width: 280px; 28 height: 120px; 29 background-size: cover; 30 } 31 32 .el-upload__tip { 33 color: red; 34 } 35 </style>View Code
1 <el-upload class="upload-demo" 2 ref="banners" 3 :limit="1" 4 action="https://jsonplaceholder.typicode.com/posts/" 5 accept="image/jpeg,image/png" 6 name="bannersImg" 7 :http-request="uploadFile" 8 :auto-upload="false"> 9 <el-button slot="trigger" size="small" type="primary" v-on:click="selectUpload('bannersImg')">選取檔案</el-button> 10 <el-button style="margin-left: 10px;" size="small" type="success" v-on:click="submitUpload('bannersImg')">確定上傳</el-button> 11 <div slot="tip" class="el-upload__tip">只能上傳jpg檔案，且不超過200kb,尺寸:440x240</div> 12 </el-upload> 13 <div class="uploader banners-size"> 14 <img v-if="banners_imageUrl" :src="banners_imageUrl" class="avatar-banners"> 15 </div>
前端核心代碼：
1 //選取檔案 2 selectUpload: function (obj) { 3 this.clearFiles(obj); 4 }, 5 //確定上傳 6 submitUpload: function (obj) { 7 this.$refs.banners.submit(); 8 }, 9 //清除檔案狀態 10 clearFiles: function (filename) { 11 this.$refs.banners.clearFiles(); 12 }, 13 14 //檔案上傳 15 uploadFile: function (params) { 16 //console.log(params); 17 var _filename = params.filename; 18 19 //判斷圖片格式 20 const isJPG = params.file.type === 'image/jpeg'; 21 if (!isJPG) { 22 this.$message.error('上傳圖片只能是 JPG 格式!'); 23 this.clearFiles(_filename); 24 return isJPG; 25 } 26 this.BannersUpload(params.file); 27 }, 28 //圖片上傳 29 BannersUpload: function (file) { 30 const isLtSize = file.size / 1024 / 1024 / 1024 < 20; //不能超過xx kb 31 if (!isLtSize) { 32 this.$message.error('上傳圖片大小不能超過 20kb!'); 33 this.clearFiles(file.filename); 34 return isLtSize; 35 } 36 37 //執行上傳操作 38 this.FileUpload(file) 39 .then(res => { //回傳結果 40 var getResult = JSON.parse(res.data); 41 //成功 42 if (getResult.Code == 0) { 43 this.$message.success('上傳成功'); 44 this.banners_imageUrl = getResult.Data; 45 this.addForm.BannersImg = getResult.Data; 46 } 47 //錯誤 48 if (getResult.Code == 1) { 49 if (getResult.Message) { 50 this.$message.error(getResult.Message); 51 } 52 } 53 }).catch(function (res) { 54 this.$message.success('請求例外'); 55 }); 56 }, 57 //檔案上傳 58 FileUpload: function (file) { 59 var fd = new FormData(); 60 fd.append("filedata", file); 61 //異步獲取 62 return axios.request({ 63 method: 'post', 64 baseURL: this.apiUrl, 65 url: '/WxLive/UploadImg', 66 params: { "filename": "filedata" }, //是即將與請求一起發送的 URL 引數 67 data: fd, //瀏覽器專屬：FormData, File, Blob 必須是以下型別之一:string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams 68 headers: { "Content-Type": "multipart/form-data;charset=UTF-8" }, 69 }); 70 }View Code
本地服務器上傳介面：
1 /// <summary> 2 /// 本地上傳圖片 3 /// </summary> 4 /// <returns></returns> 5 [HttpPost] 6 public JsonResult UploadImg(string filename) 7 { 8 var result = new Common.CommonResult(1, "網路請求錯誤"); 9 try 10 { 11 string basePath = ConfigurationManager.AppSettings["basePath"] ?? "\\Images"; //服務器上傳檔案夾 12 string imgpath = string.Empty; 13 14 HttpPostedFileBase file = Request.Files.Get(filename); //從browser傳過來的的檔案 15 //HttpPostedFile file = System.Web.HttpContext.Current.Request.Files.Get(filename); //從browser傳過來的的檔案 16 17 if (file != null && file.ContentLength > 0) 18 { 19 //檔案后綴名 20 string fileExtension = Path.GetExtension(file.FileName).ToLower(); 21 22 //獲取檔案名 23 string fileName = DateTime.Now.ToString("yyyy_MM_dd_HH_mm_ss_ffff"); 24 fileName += fileExtension; 25 26 Stream postStream = file.InputStream; 27 byte[] bytes = new byte[postStream.Length]; 28 postStream.Read(bytes, 0, file.ContentLength); 29 postStream.Seek(0, SeekOrigin.Begin); //設定當前流的位置為流的開始 30 postStream.Close(); 31 32 //寫入本地 33 var repath = UploadHelper.UploadFile(bytes, basePath, fileName); 34 35 result.Code = 0; 36 result.Message = "OK"; 37 result.Data =https://www.cnblogs.com/peterzhang123/p/ repath; 38 } 39 return Json(JsonConvert.SerializeObject(result)); 40 } 41 catch (Exception) 42 { 43 return Json(JsonConvert.SerializeObject(result)); 44 } 45 }View Code
上傳本地檔案處理方法：UploadHelper.UploadFile()
1 /// <summary> 2 /// 上傳檔案到本地 3 /// </summary> 4 /// <param name="filename"></param> 5 /// <param name="basePath"></param> 6 /// <param name="bytes"></param> 7 /// <returns></returns> 8 public static string UploadFile(byte[] bytes,string basePath, string filename) 9 { 10 string result = ""; 11 try 12 { 13 if (bytes != null) 14 { 15 //保存檔案路徑，比如：\\Images\\2020-01-01\\，這里的basePath相當于\\Images 16 string upfilePath = basePath + "\\" + DateTime.Now.ToString("yyyy-MM-dd") + "\\"; //根路徑 17 //上傳到本地 ~/表示上級目錄，如果不加則表示同級目錄 18 string filePath = System.Web.HttpContext.Current.Server.MapPath("~/" + upfilePath); 19 if (!Directory.Exists(filePath)) 20 { 21 Directory.CreateDirectory(filePath); 22 } 23 //完整路徑：專案目錄\\Images\\2020-01-01\\abc.jpg 24 string fileSavePath = Path.Combine(filePath, filename); //合并成完整的檔案路徑 25 26 //寫入本地 27 using (FileStream fs = new FileStream(fileSavePath, FileMode.Create)) 28 { 29 fs.Write(bytes, 0, bytes.Length); 30 fs.Close(); 31 fs.Dispose(); 32 } 33 //回傳路徑：/Images/2020-01-01/abc.jpg 34 result = (upfilePath + filename).Replace("\\", "/"); 35 } 36 else 37 { 38 result = "上傳的檔案資訊不存在！"; 39 } 40 } 41 catch (Exception ex) 42 { 43 return ""; 44 } 45 return result; 46 }
一般向本地服務器上傳的同時，還要向cdn服務器上傳一份，請求cdn服務器介面代碼如下：
1 /// <summary> 2 /// 上傳檔案到遠程服務器 3 /// </summary> 4 /// <param name="bytes"></param> 5 /// <param name="basepath"></param> 6 /// <param name="filename"></param> 7 /// <returns></returns> 8 public static string PostUploadFile(byte[] bytes, string basepath, string filename) 9 { 10 string repath = ""; 11 string hosturl = ConfigurationManager.AppSettings["apihost"] ?? "https://cache.xxxxxx.com:8080/"; //遠程服務器路徑 12 try 13 { 14 var apiurl = hosturl + "api/UpLoad/ReceiveFile"; //遠程請求介面 相當于：https://cache.xxxxxx.com:8080/api/UpLoad/ReceiveFile 15 HttpClient httpClient = HttpClientFactory.GetHttpClient(); 16 string upfilePath = basepath + "\\" + DateTime.Now.ToString("yyyy-MM-dd") + "\\"; //保存路徑，比如：\\Images\\2020-01-01\\，basepath相當于\\Images 17 using (var multipartFormDataContent = new MultipartFormDataContent()) //MultipartFormDataContent相當于 "Content-Type": "multipart/form-data" 18 { 19 //二進制流傳輸,遠程服務器可以使用: Request.Files.Get("filedata")接收 20 multipartFormDataContent.Add(new ByteArrayContent(bytes, 0, bytes.Length), "filedata", filename); 21 //遠程服務器可以使用: Request["filePath"]接收 22 multipartFormDataContent.Add(new StringContent(upfilePath, Encoding.UTF8, "application/x-www-form-urlencoded"), "filePath"); 23 24 //post請求 25 var response = httpClient.PostAsync(apiurl, multipartFormDataContent).Result; 26 if (response.StatusCode == System.Net.HttpStatusCode.OK) 27 { 28 var result = response.Content.ReadAsStringAsync().Result; 29 if ((int)response.StatusCode == 200) 30 { 31 repath = (upfilePath + filename).Replace("\\", "/"); 32 } 33 } 34 } 35 return repath; 36 } 37 catch (Exception ex) 38 { 39 return repath; 40 } 41 }
接下來看看在遠程cdn服務器上如何接收本地服務器上傳過來的檔案，實際上跟本地服務上傳沒多大區別，
創建一個檔案上傳服務，比如創建一個WebApI服務，創建一個檔案上傳介面：/api/UpLoad/ReceiveFile，然后將該服務發布到IIS上即可
然后客戶端請求路徑：https://cache.xxxxxx.com:8080/api/UpLoad/ReceiveFile
1 /// <summary> 2 /// 檔案上傳服務 3 /// </summary> 4 public class UpLoadController : ApiController 5 { 6 /// <summary> 7 /// 檔案接收介面 8 /// </summary> 9 /// <returns></returns> 10 [HttpPost] 11 public HttpResponseMessage ReceiveFile() 12 { 13 HttpResponseMessage response = null; 14 try 15 { 16 HttpPostedFile file = HttpContext.Current.Request.Files.Get("filedata"); //獲取檔案流 17 string getfilepath = HttpContext.Current.Request["filePath"] ?? "\\Images\\"; //獲取保存路徑(不包含檔案名)，默認：\\Images\\ 18 var filename = file.FileName; //獲取檔案名 19 20 //保存到本地的路徑，~/表示指向上級根目錄 21 string savePath = HttpContext.Current.Server.MapPath("~/" + getfilepath); 22 23 //創建檔案夾 24 if (!Directory.Exists(savePath)) 25 { 26 Directory.CreateDirectory(savePath); 27 } 28 29 //保存檔案到指定路徑下 30 string saveFilePath = Path.Combine(savePath, filename); 31 Stream postStream = file.InputStream; 32 using (FileStream fs = new FileStream(saveFilePath, FileMode.Create)) 33 { 34 byte[] new_b = new byte[postStream.Length]; 35 while (postStream.Read(new_b, 0, new_b.Length) != 0) 36 { 37 fs.Write(new_b, 0, new_b.Length); 38 } 39 postStream.Close(); 40 fs.Close(); 41 fs.Dispose(); 42 } 43 response = Request.CreateResponse(HttpStatusCode.OK); //成功回傳200 44 } 45 catch (Exception) 46 { 47 response = Request.CreateResponse(HttpStatusCode.BadRequest); //回傳400 48 } 49 return response; 50 } 51 52 }
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/1599.html
標籤：ASP.NET