本地服務的檔案上傳與遠端服務的檔案上傳(圖檔上傳)

檔案上傳屬于常見業務，很多地方都用的到(比如圖檔上傳);

确切的說，這裡的“本地”是指的項目所在的服務端，隻是在項目服務端再次請求另外一個服務端進行檔案二次上傳。

比如：我們上傳圖檔的時候，請求項目的伺服器需要上傳一份，同時還要上傳一份到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.........