ArrayBuffer转文件流

最新推荐文章于 2025-09-05 11:22:02 发布

原创最新推荐文章于 2025-09-05 11:22:02 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中处理二进制数据，特别是从ArrayBuffer转换为Base64，然后转为Blob，最终转换为文件流用于上传。过程中涉及axios库的使用，以及各种数据类型间的转换方法，如arrayBufferToBlob、base64ToFile和blobToFile等关键函数。

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

请求时加入 arraybuffer 返回类型

      axios({
        method: 'get | post',
        url: "****",
        responseType: 'arraybuffer'
      }).then(res => {
        console.log(res);
        const blob = this.arrayBufferToBlob(res.data, sn);
        const file = this.blobToFile(blob, sn, format);
        this.upload(file);  // 执行业务流程 上传
      });

得到 ArrayBuffer类型，

转为 base64 后

	/** arrayBuffer 转 base64 */
    arrayBufferToBlob(arrayBuffer, filename) {
      return new Blob([arrayBuffer], { type: filename });
    },

再转为 blob

	/** base64 转 blob */
    base64ToFile(base64) {
      const arr = base64.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const suffix = mime.split("/")[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      const file = new File([u8arr], `${"file"}.${suffix}`, {
        type: mime,
      });

      return file;
    }

最后转为文件流（file）

	/** blob 转 文件流（file） */
    blobToFile(blob, filename, type) {
      return new File([blob], filename, { type })
    },

ArrayBuffer转 文件流

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

请求时 加入 arraybuffer 返回类型

转为 base64 后

再转为 blob

最后转为 文件流 （file）

ArrayBuffer转文件流

请求时加入 arraybuffer 返回类型

最后转为文件流（file）