本地服务的文件上传与远程服务的文件上传(图片上传)

文件上传属于常见业务,很多地方都用的到(比如图片上传);

确切的说,这里的“本地”是指的项目所在的服务端,只是在项目服务端再次请求另外一个服务端进行文件二次上传。

比如:我们上传图片的时候,请求项目的服务器需要上传一份,同时还要上传一份到cdn服务器。

示例使用控件: el-upload 作为演示

本地服务的文件上传与远程服务的文件上传(图片上传)_第1张图片

 1 
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,尺寸:440x240div>
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         /// 
 2         /// 本地上传图片
 3         /// 
 4         /// 
 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 = 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         /// 
 2         /// 上传文件到本地
 3         /// 
 4         /// 
 5         /// 
 6         /// 
 7         /// 
 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         /// 
 2         /// 上传文件到远程服务器
 3         /// 
 4         /// 
 5         /// 
 6         /// 
 7         /// 
 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上即可

本地服务的文件上传与远程服务的文件上传(图片上传)_第2张图片

然后客户端请求路径:https://cache.xxxxxx.com:8080/api/UpLoad/ReceiveFile

 1     /// 
 2     /// 文件上传服务
 3     /// 
 4     public class UpLoadController : ApiController
 5     {
 6         /// 
 7         /// 文件接收接口
 8         /// 
 9         /// 
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     }

 

你可能感兴趣的:(本地服务的文件上传与远程服务的文件上传(图片上传))