uni-app如何将图片文件转换成Blob对象

冬萱姑娘_6646

冬萱姑娘_6646

2026-08-26

363人浏览

原创

uni-app中base64转blob需先截去data前缀、atob解码为二进制、转uint8array再构造blob;h5端需fetch blob url获取真实blob;app/小程序端无需转换,直接传filepath更稳妥。

uni-app如何将图片文件转换成blob对象

uni-app 里 base64 怎么转 Blob 对象

直接用 Blob 构造函数就能转,但必须先解码 base64 字符串为二进制数据,否则生成的 Blob 内容是乱码或空的。

常见错误现象:Blob 对象大小为 0、上传后后端解析失败、图片打不开。

  • base64 字符串开头通常带 data:image/png;base64, 这段必须截掉,只留纯 base64 数据
  • 用 atob() 解码时,输入必须是合法 base64 字符串(长度为 4 的倍数,不含换行/空格)
  • 解码后需转成 Uint8Array 或 ArrayBuffer,再传给 Blob 构造函数
  • 建议指定 type 参数,比如 "image/jpeg",否则默认是 "",部分后端或 SDK(如 ali-oss)会校验失败

示例代码:

base64ToBlob(base64Str) {
  const arr = base64Str.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);
  }
  return new Blob([u8arr], { type: mime });
}

H5 端 uni.chooseImage 后怎么拿到 Blob

在 H5 端,uni.chooseImage 返回的是临时文件路径(如 blob:http://xxx/xxx),这个路径本身不能直接用于 uni.uploadFile({ filePath }) —— 它会报错或上传为空。

正确做法是:用 fetch 或 XMLHttpRequest 请求该 blob URL,拿到 Response.blob()。

  • 不能直接 new Blob([url]) —— 那只是把字符串当二进制塞进去,不是真实内容
  • H5 没有 uni.getFileSystemManager().readFile,别套小程序写法
  • 注意跨域:blob URL 是同源的,fetch 可以直接读,无需额外配置
  • 如果后续要传给 ali-oss,它要求 File 或 Blob,这里返回的 Blob 可直接用

简写示例:

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
async chooseAndToBlob() {
  const res = await uni.chooseImage({ count: 1 });
  const blobUrl = res.tempFilePaths[0];
  const response = await fetch(blobUrl);
  return await response.blob();
}

App 和小程序端要不要转 Blob

不需要主动转 —— uni.uploadFile 在 App 和小程序端原生支持 filePath(本地临时路径),直接传就行;强行转 Blob 反而多此一举,还可能因平台限制失败(比如 App 端无法通过 JS 访问本地文件系统读取 blob URL)。

但如果你用的是第三方 SDK(如 ali-oss),它明确要求 File 或 Blob 类型,那就要分平台处理:

  • 小程序端:用 uni.getFileSystemManager().readFile 读取 tempFilePaths[0],得到 arrayBuffer,再构造 Blob
  • App 端:目前官方不提供 JS 层读取本地文件为 Blob 的能力,推荐改用 uni.uploadFile 直传,或借助 renderjs 在 native 层转换
  • H5 端:如上所述,fetch(blobUrl).then(r => r.blob()) 最可靠

uni.uploadFile 传 Blob 还是 File 更稳妥

在 H5 端,uni.uploadFile 的 file 参数接受 File 或 Blob,但推荐优先用 File 对象 —— 因为它自带 name 和 type,后端更容易识别文件类型和扩展名。

Blob 没有 name 属性,上传时若不手动设置 fileName(uni.uploadFile 的 name 是字段名,不是文件名),后端可能收到无扩展名的文件。

  • 从 base64 转 File:先转 Blob,再用 new File([blob], "xxx.jpg", { type: "image/jpeg" })
  • 从 blob URL 转 File:同理,fetch 得到 blob 后包装成 File,记得补上合理文件名和 type
  • 避免用随机名如 timestamp + ".jpg",应尽量从原始路径或 base64 mime 推断真实类型

容易被忽略的一点:H5 端上传失败常不是因为格式不对,而是后端没收到 Content-Disposition 中的 filename —— 这依赖于你传的是 File 而非裸 Blob。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2203

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4703

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5850

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5298

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

743

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

1995

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2802

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

956

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3139

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习