uniapp移动端获取本地照片Base64编码
时间: 2025-06-28 22:20:06 浏览: 8
### 实现 UniApp 中选择本地图片并转换为 Base64 编码
为了实现在 UniApp 移动端应用中选择本地图片并将其转换为 Base64 编码的功能,可以利用 `uni.chooseImage` API 来选取图片,并通过 HTML5 的 FileReader 对象来读取文件内容作为 Data URL 形式的数据[^1]。
#### 使用的 API 和方法说明
- **uni.chooseImage**: 用于从本地相册选择图片或者拍照获取图片。
- **FileReader.readAsDataURL()**: 将文件的内容读入内存,并以 data url 的形式表示出来。这正是将图像转成 base64 所需要的方式。
#### 示例代码
下面是一个简单的例子展示如何实现上述功能:
```javascript
// 在页面 script 部分定义函数
methods: {
chooseAndConvertToBase64() {
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
const tempFilePaths = res.tempFilePaths;
// 创建一个隐藏的 img 标签用来显示最终的结果 (可选)
let imgTag = document.createElement('img');
// 获取临时路径的第一个文件
wx.getFileSystemManager().readFile({
filePath: tempFilePaths[0], // 文件路径
encoding: 'base64', // 设置编码方式为 base64
success(res) { // 成功回调
console.log('Base64:', 'data:image/png;base64,' + res.data);
// 如果想要立即看到效果,可以通过创建 image 元素设置 src 属性来预览
imgTag.src = 'data:image/png;base64,' + res.data;
document.body.appendChild(imgTag); // 添加到 body 中以便查看
// 或者你可以在这里处理你的 base64 字符串...
},
fail(err){
console.error("Failed to read file as base64", err);
}
});
}
});
}
}
```
请注意,在实际项目里应该考虑错误处理逻辑以及用户体验优化等方面的工作。此外,对于较大的图片文件,建议先对其进行适当大小调整再进行 base64 转换操作,以免影响性能。
阅读全文
相关推荐


















