base64转blob vue

在 Vue 中将 base64 转换为 blob 可以通过以下代码实现：

// 将 base64 转换为 blob
function base64ToBlob(base64) {
  const binaryData = atob(base64);
  const arrayBuffer = new ArrayBuffer(binaryData.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < binaryData.length; i++) {
    uint8Array[i] = binaryData.charCodeAt(i);
  }
  return new Blob([uint8Array], { type: 'image/png' }); // 这里的 type 需要根据具体情况进行修改
}

// 在 Vue 中使用这个函数
methods: {
  async handleBase64ToBlob(base64) {
    const blob = base64ToBlob(base64);
    // 这里可以将 blob 上传到服务器或者其他操作
  }
}

调用 `handleBase64ToBlob` 函数时，将需要转换的 base64 作为参数传入即可。注意，这里需要将转换后的 blob 用 `new FormData()` 包装起来，才能够在表单中提交。

相关问题

vue实现base64转Blob

在Vue中，可以使用JavaScript中的File API和Blob对象来实现base64转Blob。

具体步骤如下:

1. 将base64字符串解码为Uint8Array类型的二进制数据

    const bytes = window.atob(base64.split(',')[1])
    const array = new Uint8Array(bytes.length)
    for (let i = 0; i < bytes.length; i++) {
        array[i] = bytes.charCodeAt(i)
    }

2. 使用new Blob()函数创建Blob对象

    const blob = new Blob([array], { type: 'application/octet-stream' })

3. 你也可以使用npm库blob-util 这个库也可以实现base64转blob

    import { base64StringToBlob } from 'blob-util'
    const blob = base64StringToBlob(base64, 'application/octet-stream')

完整的示例代码如下：

    export default {
        methods: {
            async handleClick() {
                const base64 = 'data:application/octet-stream;base64,YWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4'
                const blob = await this.base64ToBlob(base64)
                // 使用blob对象
            },
            base64ToBlob(base64) {
                const bytes = window.atob(base64.split(',')[1])
                const array = new Uint8Array(bytes.length)
                for (let i = 0; i < bytes.length; i++) {
                    array[i] = bytes.charCodeAt(i)
                }
                return new Blob([array], { type: 'application/octet-stream' })
            }
        }
    }

请注意，如果要在IE浏览器中使用Blob对象，需要使用polyfill库。

vue3+ts使base64转blob

在Vue 3和TypeScript环境中，将Base64编码的字符串转换为Blob对象可以通过以下步骤实现：

1. 首先，你需要一个Base64编码的字符串，它通常包含一个数据URI前缀，例如`data:image/png;base64,`，需要将其去除以便获取纯Base64字符串。

2. 然后，你可以使用TypeScript中的`Buffer`类（或者在浏览器中使用`atob`函数）将Base64字符串解码成二进制字符串。

3. 最后，使用`Blob`构造函数将二进制字符串转换为Blob对象。

下面是一个示例代码，展示了如何实现这个转换过程：

function base64StringToBlob(base64String: string): Blob {
  // 移除Base64字符串前缀
  const纯base64字符串 = base64String.split('base64,')[1];

  // 将Base64字符串转换为二进制字符串
  const binaryString = atob(纯base64字符串);

  // 计算二进制数据的长度
  const len = binaryString.length;

  // 创建一个数组用于存放二进制数据
  const uintArray = new Uint8Array(len);

  // 将二进制字符串填充到uint8Array中
  for (let i = 0; i < len; i++) {
    uintArray[i] = binaryString.charCodeAt(i);
  }

  // 使用uint8Array创建Blob对象
  return new Blob([uintArray], { type: 'image/png' });
}

需要注意的是，上面的代码假设Base64字符串代表的是PNG图片，`type`属性被设置为`image/png`。如果你要处理的图片格式不同，应该相应地修改`type`属性。