vue处理文件流实现上传下载

小壮哥哥

已于 2023-05-19 14:48:52 修改

阅读量1.7k

点赞数 1

文章标签： javascript 前端开发语言

于 2023-05-08 19:05:02 首次发布

本文链接：https://blog.csdn.net/qq_44024168/article/details/130565024

版权

1.文件流转base64

         axios({
            method: "post",
            url: "************",
            responseType: "blob", //必须将返回数据格式更改为 blob 格式
          }).then(res => {
          // 处理返回的文件流数据转为blob对象
            let blob = new Blob([res.data], { type: "image/jpeg" }); 
              filetoBase64(blob).then(res => {
              //此时的 res 是返回处理后文件的base64编码
              this.avatarImg = res;
            });
          });


//文件转 base64
export const filetoBase64 = file => {
  let reader = new FileReader(); //实例化文件读取对象
  reader.readAsDataURL(file); //将文件读取为 DataURL,也就是base64编码
  return new Promise((reslove, reject) => {
    reader.onload = e => {
      //文件读取成功完成时触发
      let dataURL = e.target.result; //获得文件读取成功后的DataURL,也就是base64编码
      reslove(dataURL);
    };
  });
};

2.文件下载

// (1)利用window.open("文件地址")
	      windows.open() 
// (2)利用 a 标签
		  const link = document.createElement('a');
          const blob = new Blob([res.data]);
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          link.download = "这是文件名";//设置下载文件名
          document.body.appendChild(link);
          link.click();
    	  URL.revokeObjectURL(blob) //释放URL

3.文件上传

    <input type="file" class="fileInp" style="display:none" @change="fileChange" />

    fileChange(event) {
      let file = event.target.files[0]; //获取上传的文件
      let forms = new FormData() //创建表单对象，因为文件上传必须以表单形式上传
      forms.append('multipartFile', file) //追加上传的文件
      forms.append('name','xiaoming' ) //其他附加的数据
      axios({
        url: process.env.VUE_APP_BASE_API + "/OfficeWorkerMng/BapMember/uploadLrm",
        method: "post",
        data: forms,
      }).then(res => {
        this.$message.success("上传成功");
      })
    },