base64转为byte,blob等方法

dataURLtoBlob (dataurl) {
      var arr = dataurl.split(',')
      // var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      console.log(u8arr)
      return u8arr
      // return new Blob([u8arr], {
      //   type: mime
      // })
    },
    stringToByte (base64) {
      var arr = base64.split(',')
      var str = window.atob(arr[1])
      var bytes = []
      var len, c
      len = str.length
      for (var i = 0; i < len; i++) {
        c = str.charCodeAt(i)
        if (c >= 0x010000 && c <= 0x10FFFF) {
          bytes.push(((c >> 18) & 0x07) | 0xF0)
          bytes.push(((c >> 12) & 0x3F) | 0x80)
          bytes.push(((c >> 6) & 0x3F) | 0x80)
          bytes.push((c & 0x3F) | 0x80)
        } else if (c >= 0x000800 && c <= 0x00FFFF) {
          bytes.push(((c >> 12) & 0x0F) | 0xE0)
          bytes.push(((c >> 6) & 0x3F) | 0x80)
          bytes.push((c & 0x3F) | 0x80)
        } else if (c >= 0x000080 && c <= 0x0007FF) {
          bytes.push(((c >> 6) & 0x1F) | 0xC0)
          bytes.push((c & 0x3F) | 0x80)
        } else {
          bytes.push(c & 0xFF)
        }
      }
      return bytes
    },
    base64ToArrayBuffer (base64) {
      var arr = base64.split(',')
      var binaryString = window.atob(arr[1])
      var len = binaryString.length
      var bytes = new Uint8Array(len)
      for (var i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i)
      }
      console.log(bytes.buffer)
      return bytes.buffer
    }

### Vue3 中 Base64 转换为 Blob 对象的方法 在 Vue3 项目中,可以利用 JavaScript 的原生方法来实现将 Base64 编码转换为 Blob 对象的功能。以下是具体的实现方式: #### 方法描述 通过解析 Base64 字符串并将其解码为二进制数据,再创建一个新的 `Uint8Array` 数组存储这些字节数据。最后,基于该数组构建一个 `Blob` 对象。 ```javascript export function base64ToBlob(base64String, mimeType = 'application/octet-stream') { const byteCharacters = atob(base64String.split(',')[1]); // 解码 Base64 数据部分 const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); // 将字符转为对应的 ASCII 值 } const byteArray = new Uint8Array(byteNumbers); // 创建 Uint8Array 存储字节数组 return new Blob([byteArray], { type: mimeType }); // 返回新的 Blob 对象[^1] } ``` 此函数接受两个参数: - **base64String**: 包含 MIME 类型前缀的完整 Base64 字符串。 - **mimeType**: 可选,默认值为 `'application/octet-stream'`,用于指定目标文件的内容类型。 #### 使用示例 假设有一个图片的 Base64 字符串如下所示: ```text data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA... ``` 可以通过调用上述方法将其转换为 Blob 对象: ```javascript const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...'; const blob = base64ToBlob(base64Image); // 验证 Blob 是否成功创建 console.log(blob instanceof Blob); // 输出 true ``` 如果需要进一步操作(例如上传到服务器),可以直接使用这个 Blob 对象作为表单数据的一部分。 --- ### 关于 Vue 文件上传中的常见错误处理 当尝试上传文件时,可能会遇到类似于以下错误消息的情况:“Failed to convert property value of type ‘java.lang.String’ to required type ‘org.springframework.web.multipart.MultipartFile[]’”。这通常是因为前端传递的数据未被正确识别为多部件形式(MultipartFormData)。为了规避此类问题,在发送请求之前应确保已将 Blob 正确封装至 FormData 实例中[^2]。 下面是一个完整的例子演示如何结合 Axios 库完成这一过程: ```javascript import axios from 'axios'; function uploadFile(blobData) { const formData = new FormData(); formData.append('file', blobData, 'example.png'); // 添加 Blob 到 FormData 并命名文件名为 example.png axios.post('/upload-endpoint', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }) .then(response => console.log('Upload successful:', response)) .catch(error => console.error('Error during upload:', error)); } // 示例调用 const myBlob = base64ToBlob(base64Image, 'image/png'); uploadFile(myBlob); ``` 以上代码片段展示了如何先将 Base64 转化成 Blob 后再执行上传动作的过程。 --- ### 展示动态字典标签功能 对于某些场景下可能还需要配合后端返回的结果实时更新界面显示内容的需求,则可参考如下做法——借助 `<dict-tag>` 组件绑定选项列表与当前记录的状态字段共同作用达成目的[^3]: ```html <el-table-column label="状态" align="center"> <template #default="scope"> <dict-tag :options="statusOptions" :value="scope.row.status"/> </template> </el-table-column> ``` 其中 `statusOptions` 是预先加载好的键值映射关系集合;而每一行内的实际数值则由 `scope.row.status` 提供。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值