处理文件操作上传下载

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.下载base64类型文件

      downloadFileBase64(base64Data, fileName) {
        var decodedData = atob(base64Data)
        var fileData = new Uint8Array(decodedData.length)
        for (var i = 0; i < decodedData.length; i++) {
          fileData[i] = decodedData.charCodeAt(i)
        }
        // 此处blob类型改成自己需要的格式
        var file = new Blob([fileData], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" })

        var downloadLink = document.createElement("a")
        downloadLink.href = URL.createObjectURL(file)
        downloadLink.download = fileName

        document.body.appendChild(downloadLink)
        downloadLink.click()
      }

3.文件下载

// (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)利用 a 标签下载本地文件
	      <a href="/files/file.pdf" target="_bank">预览 </a>
          <a href="/files/file.pdf" download="fileName.pdf">下载 </a>

4.文件上传

    <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("上传成功");
      })
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值