//网上随便找的图片
    const url =
      "https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
    axios
      .get(url, {
        responseType: "blob", //一定要传！！！
      .then((res) => {
        console.log(res.data, "二进制流");
        const objectURL = URL.createObjectURL(res.data);
        this.imgSrc = objectURL;
最终长这样哈
 
比base64小（简洁）
比base64快
比转base64过程简单
 
<template>
  <div class="app">
    <img :src="imgSrc" alt="图片" />
</template>
<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {
      imgSrc: "",
  mounted() {
    //网上随便找的图片
    const url =
      "https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
    axios
      .get(url, {
        responseType: "blob", //一定要传！！！
      .then((res) => {
        console.log(res.data, "二进制流");
        const objectURL = URL.createObjectURL(res.data);
        console.log(objectURL);
        this.imgSrc = objectURL;
</script>
 
尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下：
// QRCode 为后端接口返回的图片数据流
const blob = new Blob([QRCode])
const url = window.URL.createObjectURL(blob)
但是把生成的URL链入img的src后仍然显示不出来，在查资料后知道还需设置responseType为blob才行，代码如下：
const QRCode = await this.$swag
如图所示为后端返回的图片。
以axios为例，我们 传递的 responseType要是blob类型responseType: 'blob',
然后走window.URL.createObjectURL将其返回的数据处理一下window.URL.createObjectURL(res)，
将处理好的数据放在img便签里面就成功了。
上个完整的代码，（axios封装的）
this.$http({
				
本文实例为大家分享了Vue利用Blob下载原生二进制数组文件的具体代码，供大家参考，具体内容如下
在服务端推送过来的二进制数组(JSON格式），在前端要处理成JS原生数组以后才能做成Blob，有两个地方要注意（详细注释），代码如下：
Vue.prototype.$downloadFile = (filename, data) => {
 if (!data) return;
 let arr8 = Uint8Array.from(data); //！！！注意1：应根据数据的类型选择适当的JS原生数组类型进行转换，也就是说服务端推送的byte型数组还是int型数组等。
 //定义文件内容，类型
```javascript
function downloadFile(data, fileName) {
  const blob = new Blob([data], { type: 'application/octet-stream' });
  if (navigator.msSaveBlob) {
    // For IE and Edge
    navigator.msSaveBlob(blob, fileName);
  } else {
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    setTimeout(() => {
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    }, 0);
// Example usage:
const binaryData = ... // Your binary data
const fileName = 'example.bin';
downloadFile(binaryData, fileName);
在上面的示例代码中，`downloadFile` 函数接收二进制数据和文件名作为参数。它首先创建一个 Blob 对象，将二进制数据和 MIME 类型 `'application/octet-stream'` 传递给它。然后，根据浏览器支持情况，通过不同的方式来触发文件下载。
对于 IE 和 Edge 浏览器，使用 `navigator.msSaveBlob` 方法来保存 Blob 对象。对于其他现代浏览器，使用 URL.createObjectURL 创建一个临时的下载链接，并将其附加到一个 `<a>` 元素上。然后，模拟点击这个链接来触发文件下载。最后，在下载完成后，移除临时链接并释放资源。
请注意，在使用这段代码时，确保你已经将二进制数据正确地传递给 `downloadFile` 函数，并提供了正确的文件名。