uni-file-picker上传时压缩图片
时间: 2024-09-27 14:00:30 浏览: 57
uni-file-picker是UniApp提供的文件选择器组件,它允许开发者从用户设备上选择文件,包括图片。当你想要在用户上传图片的同时对其进行压缩,可以借助第三方库如`sharp`(Node.js)或`componize-image-resizer`(Web端)来进行操作。
在uni-app中,你可以这样做:
1. **Web端** (Vue、H5): 使用`vue-compress-img`这样的插件,先将图片读取到内存中,然后调整尺寸并转换为Base64编码,再作为URL供服务器处理或展示。
```javascript
import { compressImage } from 'vue-compress-img';
async uploadCompressed(imgPath) {
const compressedImg = await compressImage(imgPath);
// 然后将compressedImg作为base64字符串发送给后台
}
```
2. **小程序端** (微信小程序): 可以使用wx.uploadFile配合原生的图像压缩API,先获取本地文件路径,然后进行压缩。
```javascript
uni.task.onTaskProgress({
taskId: 'your-task-id',
complete: function (res) {
if (res.errCode === 0) {
// 使用小程序提供的compressImage方法压缩图片
uni.compressImage({
src: res.tempFilePath,
destWidth: 800, // 目标宽度
destHeight: 600, // 目标高度
success: function (info) {
// 压缩后的图片路径,可以用于上传
}
});
}
}
});
```
注意,在实际应用中,你需要在后端设置好接受压缩后的图片,并且考虑如何优化压缩过程,以免影响用户体验。
阅读全文