乐趣区

关于javascript:前端常用图片文件下载上传方法

jiezi

本文整顿了前端罕用的下载文件以及上传文件的办法
例子均以 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 查看

img元素查看 src，为base64 类型

下载文件

图片下载

假如须要下载图片为 url， 文件流 解决和这个一样

  <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
图片下载同理。
更多问题欢送退出前端交换群交换 749539640

退出移动版