uni-file-picker图片上传获取时转base64

### 如何在使用 `uni-file-picker` 进行图片上传时将其转换为 Base64 格式 在 UniApp 中，可以利用 `uni-file-picker` 组件配合前端文件读取 API 来实现将选中的图片转换为 Base64 格式的功能。以下是具体的实现方式： #### 使用 File Reader 将图片转换为 Base64 当用户通过 `uni-file-picker` 选择图片后，可以通过监听其返回的临时路径 (`tempFilePath`) 并结合 JavaScript 的 `FileReader` 对象完成图片到 Base64 的转换。 ```javascript // 定义方法用于处理图片转换 function convertToBase64(tempFilePath) { return new Promise((resolve, reject) => { const reader = new FileReader(); uni.showLoading({ title: '正在加载...' }); // 显示加载提示 reader.onload = (e) => { resolve(e.target.result); // 返回 Base64 数据 uni.hideLoading(); // 隐藏加载提示 }; reader.onerror = () => { reject('Error reading the file'); uni.hideLoading(); }; reader.readAsDataURL(uni.createFileSystemManager().readFileSync(tempFilePath)); // 读取文件并转换为 Data URL }); } ``` #### 结合 `uni-file-picker` 和自定义逻辑 在页面中绑定 `@result` 或其他事件回调函数，捕获用户选择的图片信息，并调用上述方法进行 Base64 转换。 ```html <template> <view> <!-- 文件选择器 --> <uni-file-picker @result="handleResult" /> <!-- 展示 Base64 图片 --> <image v-if="base64Image" :src="base64Image" mode="aspectFit"></image> </view> </template> <script> export default { data() { return { base64Image: '', // 存储 Base64 编码后的图片 }; }, methods: { async handleResult(event) { if (event.tempFiles && event.tempFiles.length > 0) { const tempFilePath = event.tempFiles[0].path; try { this.base64Image = await convertToBase64(tempFilePath); console.log('Base64 Image:', this.base64Image); // 打印日志验证结果 } catch (error) { console.error(error); } } }, }, }; </script> ``` 以上代码实现了以下功能： 1. 用户通过 `<uni-file-picker>` 选择一张或多张图片。 2. 捕获选择的结果并通过 `convertToBase64` 方法将图片转换为 Base64 格式[^1]。 3. 将生成的 Base64 字符串存储至变量 `base64Image` 中以便展示或进一步操作。 #### 注意事项 - 如果需要支持多平台运行，则需注意某些平台上可能无法直接访问文件系统的特性[^4]。 - 建议对大尺寸图片进行压缩后再执行 Base64 转换，以减少内存占用和提升性能[^2]。 --- ###