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

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

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

比如：我们上传图片的时候，请求项目的服务器需要上传一份，同时还要上传一份到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 kb31      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, URLSearchParams68       headers: { "Content-Type": "multipart/form-data;charset=UTF-8" },69      });70     }      

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    try10    {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.Conte.........