vue中如何把base64转换成url

vue中如何把base64转换成url，希望来个完整的方法。平台真是的，为啥非要30个字符，强迫症产品经理吧

给你把代码都写了，并且逐行注释好了：

function base64ToUrl(base64) { // 定义函数，参数为base64字符串
  return URL.createObjectURL(base64ToFile(base64)); // 返回一个url
}

function base64ToFile(base64) { // 定义函数，参数为base64字符串
  let arr = base64.split(','); // 将base64字符串以逗号分隔成数组
  let mime = arr[0].match(/:(.*?);/)[1]; // 获取图片类型
  let bstr = atob(arr[1]); // 解码base64字符串
  let n = bstr.length; // 获取解码后的字符串长度
  let u8arr = new Uint8Array(n); // 创建一个长度为n的Uint8Array数组
  while (n--) { // 循环n次
    u8arr[n] = bstr.charCodeAt(n); // 将解码后的字符串转换为Unicode编码并存储到数组中
  }
  return new File([u8arr], 'file', { type: mime }); // 返回一个File对象
}

另外在 Vue 中，可以通过在模板中使用 v-bind 指令来将数据绑定到 HTML 属性上。要将 Base64 编码的图像数据转换为可用于 img 标签的 URL，可以使用 URL.createObjectURL()这个API来完成。

 var base64ImgtoFile = function(dataurl,filename="file") {
         var arr = dataurl.split(','),
             mime = arr[0].match(/:(.*?);/)[1]
             suffix = mime.split('/')[1],
             bstr = atob(arr[1]),
             n = bstr.length,
             u8arr = new Uint8Array(n);
         while (n--) {
             u8arr[n] = bstr.charCodeAt(n);
         }
         return new File([u8arr], filename+"."+suffix, { type: mime });
     }
 function getBase64URL(pic) {
        const blob = base64ImgtoFile(pic)
        const blobUrl = window.URL.createObjectURL(blob);
        return blobUrl
    }

我引用ChatGPT作答：在Vue中，你可以使用Blob对象和URL.createObjectURL()方法将base64编码转换成URL。以下是一个完整的方法：

export default {
  methods: {
    convertBase64ToUrl(base64) {
      const blob = this.base64ToBlob(base64);
      return URL.createObjectURL(blob);
    },
    base64ToBlob(base64) {
      const binary = atob(base64.split(',')[1]);
      const array = [];
      for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], { type: 'image/jpeg' }); // 这里的type可以根据实际情况进行修改
    },
  },
};

其中，convertBase64ToUrl方法接受一个base64字符串作为参数，并返回转换后的URL。

转成url嘛？

如果是觉得 base64 字符串过长的话，可以尝试用 md5 转存，调整成16位就完了呗，到时候调用的时候加密解密一下。

前端再怎么转也是刷新页面这个之前的url就没有用了

以下回复来自CHATGPT

在Vue中，可以使用URL.createObjectURL()方法将Base64转换为URL。
示例代码：

//base64字符串
const base64Str = 'data:image/png;iV.....';

//转换为URL
const imgUrl = URL.createObjectURL(base64ToBlob(base64Str));

//显示图片
<img :src="imgUrl">

//Base64字符串转Blob对象
function base64ToBlob(base64Str){
  const parts = base64Str.split(';base64,');
  const contetType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Unit8Array(rawLength);

  for(let i = 0; i < rawLength; ++i){
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array],{ type:contentType});
}

在上面的示例中，我们首先将Base64字符串转换为Blob对象，然后使用URL.createObjectURL()方法将其转换为URL。最后，将URL作为图片的src属性值，以显示图片。

把base64转为url方法如下


function base64ToString(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

使用方法


base64ToString(base64);

该回答引用ChatGPT
望采纳
在Vue中，可以使用URL.createObjectURL方法将base64编码的字符串转换为URL。可以将base64字符串转换为Blob对象，然后使用URL.createObjectURL生成URL。以下是一个示例代码：

// 将 base64 字符串转换为 Blob 对象
const blob = new Blob([base64String], { type: 'image/png' });

// 生成 URL
const url = URL.createObjectURL(blob);

// 将 URL 分配给一个变量，然后使用它来渲染图片
this.imageUrl = url;

在上面的代码中，base64String是要转换的base64编码字符串。Blob对象将该字符串转换为二进制数据并指定文件类型。URL.createObjectURL方法使用该Blob对象生成URL。最后，将生成的URL分配给imageUrl变量，并在Vue组件中将其用作图片的src属性。

需要注意的是，由于使用URL.createObjectURL方法生成的URL在未使用后需要手动释放内存，因此当该图片不再需要时，需要使用URL.revokeObjectURL方法来释放与该URL相关的内存。例如：

// 当图片不再需要时，释放与URL相关的内存
URL.revokeObjectURL(url);

你看下这篇博客吧, 应该有用👉 ：vue项目中请求网络接口返回的图片url报错403解决方法
除此之外, 这篇博客: vue引入图片url变量中的 方法2: 在生命周期函数中设置 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

<template>
    <img :src = "imgUrl ">
</template>

<script>
export default{
    data(){
        return{
            imgUrl: ""
        }
    },
    created() {
        let url = "assets/images/01.jpg";
        this.imgUrl = require("@/" + url)
    }
}
</script>


const base64Str = 'NFcgpgnaps';
const url = 'data:image/png;base64,' + encodeURIComponent(window.atob(base64Str));
 
<template>
  <div>
    <img :src="url" alt="Image">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      url: ''
    };
  },
  mounted() {
    const base64Str = 'NFcgpgnaps';
      this.url = 'data:image/png;base64,' + encodeURIComponent(window.atob(base64Str));
  }
};
</script>

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
在Vue中将Base64编码的图像转换为URL有几种方法。一种常见的方法是将Base64编码转换为Blob对象，然后使用URL.createObjectURL()方法创建一个URL。以下是一个示例函数，使用此函数可以将Base64编码的图像文件转换为URL：

function dataURLtoBlob(dataURL) {
  var arr = dataURL.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), 
      n = bstr.length, 
      u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

function base64ToUrl(base64) {
    var blob = dataURLtoBlob(base64);
    return URL.createObjectURL(blob);
}

使用方法：

var url = base64ToUrl(base64Data);

其中 base64Data是你要转换的Base64字符串。
如果我的回答解决了您的问题，请采纳！

将图片文件转为二进制，然后通过URL的createObjectURL函数，将二进制转为url格式

function getBase64URL(pic) {
        const blob = base64ImgtoFile(pic)
        const blobUrl = window.URL.createObjectURL(blob);
        return blobUrl
    }