常用圖片文件下載上傳方法

文末有包郵送書！

本文整理了前端常用的下載文件以及上傳文件的方法。
以vue+element ui+axios為例,不使用el封裝好的上傳組件，這裡自行進行封裝實現，完整demo可以查看【閱讀原文】

上傳文件

以圖片為例，文件上傳可以省略預覽圖片功能

圖片上傳可以使用2種方式：文件流和base64;

1.文件流上傳+預覽：

*  <input type="file" id='imgBlob' @change='changeImgBlob' />
  <el-image style="width: 100px; height: 100px" :src="imgBlobSrc"></el-image>*
// data
imgBlobSrc: ""

// methods
changeImgBlob() {
      let file = document.querySelector("#imgBlob");
      /**
       *圖片預覽
       *更適合PC端，兼容ie7+，主要功能點是window.URL.createObjectURL
       */
      var ua = navigator.userAgent.toLowerCase();
      if (/msie/.test(ua)) {
        this.imgBlobSrc = file.value;
      } else {
        this.imgBlobSrc = window.URL.createObjectURL(file.files[0]);
      }
      //上傳後臺
      const fd = new FormData();
      fd.append("files", file.files[0]);
      fd.append("xxxx", 11111); //其他欄位,根據實際情況來
      axios({
        url: "/yoorUrl", //URL,根據實際情況來
        method: "post",
        headers: { "Content-Type": "multipart/form-data" },
        data: fd
      });
}
瀏覽器network查看

img元素查看src，為blob類型
2.Base64上傳+預覽：
<input type="file" id='imgBase' @change='changeImgBase' />
<el-image style="width: 100px; height: 100px" :src="imgBaseSrc"></el-image>
// data
imgBaseSrc : ""

// methods
    changeImgBase() {
      let that = this;
      let file = document.querySelector("#imgBase");
      /**
      *圖片預覽
      *更適合H5頁面，兼容ie10+，圖片base64顯示，主要功能點是FileReader和readAsDataURL
      */
      if (window.FileReader) {
        var fr = new FileReader();
        fr.onloadend = function (e) {
          that.imgBaseSrc = e.target.result;
          //上傳後臺
          axios({
            url: "/yoorUrl", //URL,根據實際情況來
            method: "post",
            data: {
              files: that.imgBaseSrc
            }
          });
        };
        fr.readAsDataURL(file.files[0]);
      }
    }
瀏覽器network查看

下載文件圖片下載
  <el-image style="width: 100px; height: 100px" :src="downloadImgSrc"></el-image>
  <el-button type="warning" round plain size="mini" @click='downloadImg'>點擊下載</el-button>
注意：這裡需要指定 responseType為blob
//data
 downloadImgSrc:'https://i.picsum.photos/id/452/400/300.jpg?hmac=0-o_NOka_K6sQ_sUD84nxkExoDk3Bc0Qi7Y541CQZEs'
//methods
downloadImg() {
      axios({
        url: this.downloadImgSrc, //URL,根據實際情況來
        method: "get",
        responseType: "blob"
      }).then(function (response) {
        const link = document.createElement("a");
        let blob = new Blob([response.data], { type: response.data.type });
        let url = URL.createObjectURL(blob);
        link.href = url;
        link.download = `實際需要的文件名.${response.data.type.split('/')[1]}`;
        link.click();
        document.body.removeChild(link);
      });
    }
文件下載(以pdf為例)
  <el-image style="width: 100px; height: 100px" :src="downloadImgSrc"></el-image>
  <el-button type="warning" round plain size="mini" @click='downloadImg'>點擊下載</el-button>
注意：這裡需要指定 responseType為blob
//data
 downloadImgSrc:'https://i.picsum.photos/id/452/400/300.jpg?hmac=0-o_NOka_K6sQ_sUD84nxkExoDk3Bc0Qi7Y541CQZEs'
//methods
downloadImg() {
      axios({
        url: this.downloadImgSrc, //URL,根據實際情況來
        method: "get",
        responseType: "blob"
      }).then(function (response) {
        const link = document.createElement("a");
        let blob = new Blob([response.data], { type: response.data.type });
        let url = URL.createObjectURL(blob);
        link.href = url;
        link.download = `實際需要的文件名.${response.data.type.split('/')[1]}`;
        link.click();
        document.body.removeChild(link);
      });
    }
pdf預覽可以參考如何預覽以及下載pdf文件
小結圖片上傳可以使用2種方式文件流和Base64
圖片下載同理。包郵送書
正值五一佳節，阿浪為大家送上八本《Web前端性能優化》，預祝大家好運！
內容簡介：
本書涵蓋了前端優化的方方面面，不只是教給讀者解決具體性能問題的工具手冊，更重要的是幫助讀者構築起一套完整的知識體系。在此基礎上讀者可以做到舉一反三，觸類旁通，從一個性能問題出發能夠提出對整個系統的優化改進策略。雖然前端性能優化是一個老生常談的問題，業界也已經有比較成熟的優化方法，但也需要承認這是一個不斷進行著技術更新和迭代的領域，新技術的出現帶來了新的方法同時也會引入新的問題，本書對這些新技術和新問題都有所涉及。另外說到底前端性能優化是一個工程實踐，所以本書不僅有紮實全面的理論做基礎，同時還包含了大量的實踐案例，充分做到了理論結合實踐。
抽獎方式：
先掃碼添加阿浪的微信（上圖）
回復暗號777獲取小程序抽獎碼，掃碼即可參與
開獎時間: 周二(05/06)中午12：00
05月06號中午12點準時開獎，預祝大家好運！逾期本活動作廢！中獎者如果24小時內未填寫地址，視為自動棄權！