vue 如何将src是base64的图片转化成file对象

vue 如何将src是base64的图片转化成file对象

在Vue中，你可以通过将base64字符串转换为Blob对象，然后使用Blob对象创建一个File对象。以下是一个简单的方法来实现这一转换：

methods: {
  base64ToFile(base64Data, filename) {
    // 将base64的数据部分提取出来
    const arr = base64Data.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
 
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
 
    // 将Uint8Array转换为Blob对象
    const blob = new Blob([u8arr], { type: mime });
 
    // 创建File对象
    const file = new File([blob], filename, { type: mime });
 
    return file;
  }
}

 使用这个方法时，你需要传入base64字符串和你想要设置的文件名。例如，如果你有一个base64编码的图片字符串，你可以这样使用这个方法：

// 假设你的base64图片字符串是这样的
const base64Str = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
 
// 你想要的文件名
const filename = 'image.png';
 
// 转换为File对象
const file = this.base64ToFile(base64Str, filename);
 
// 现在你可以使用这个file对象了，例如可以用来设置图片的src属性
// 或者作为表单提交的一部分

请注意，这个方法假设base64字符串是有效的，并且已经包含了正确的MIME类型。如果base64字符串不是有效的或者MIME类型不正确，这段代码可能不会工作。