本文整顿了前端罕用的下载文件以及上传文件的办法
例子均以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>
// dataimgBlobSrc: ""// methodschangeImgBlob() {      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>
// dataimgBaseSrc : ""// 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'//methodsdownloadImg() {      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'//methodsdownloadImg() {      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