vue 二进制转换为base64

在Vue项目中，如果需要将二进制文件转换为Base64编码，可以使用FileReader对象来读取文件内容，并转换为Base64编码。下面是一个示例代码：

deviceDoDownload().then(d => {
  console.log(d);
  if (d.data) {
    let blob = new Blob([d.data], { type: "image/jpg" });
    let Fr = new FileReader();
    Fr.readAsDataURL(blob);
    Fr.onload = (event) => {
      this.staticMap = event.target.result;
    };
  }
})

在这个示例中，先通过后端请求获取到的二进制流文件，将其转换为Blob对象，并设置类型为图片格式（例如"image/jpg"）。然后创建一个FileReader对象，调用其readAsDataURL方法将Blob对象转换为Base64编码。最后，通过Fr.onload事件的回调函数获取到转换后的Base64图片地址，并将其赋值给this.staticMap变量。

需要注意的是，为了使返回的数据类型正确，需要在请求接口中添加responseType属性，并将其设置为"blob"，以表明返回的是二进制数据类型。

以下是相关的请求接口代码：

export const deviceDoDownload = () => {
  return axios({
    url: '/aaaaaa',
    method: 'post',
    responseType: "blob"
  });
}

在这个请求接口中，使用axios进行后端请求，并通过responseType属性将返回的数据类型设置为"blob"。这样可以确保获取到的是二进制流文件。

这样，在Vue项目中就可以将二进制文件转换为Base64编码了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue中读取上传文件的内容并转换为base64编码，传递给后端接口](https://blog.csdn.net/weixin_44786530/article/details/131536958)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [在vue中将后端返回的二进制图片流转换为base64展示在页面中](https://blog.csdn.net/L_eiDigaga/article/details/112935494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]