微信小程序(vue3) - 详细实现图片压缩上传服务器示例代码，wx.chooseMedia手机拍照或相册选取后将图片进行压缩处理，手机摄像头拍照后图像太大需要先降低图像大小后再上传（不牺牲画质减小）

### Uniapp 微信小程序实现图片上传功能 #### 准备工作 为了实现在Uniapp中微信小程序的图片上传功能，需确保已安装并配置好必要的环境。这包括但不限于完成项目的创建以及相关插件的引入。 #### 获取用户相册权限 在执行任何文件操作之前，应用程序应当向用户申请访问其设备上照片库或者相机的权利。此过程可通过`uni.authorize()`方法来达成[^1]： ```javascript try { await uni.authorize({ scope: 'scope.writePhotosAlbum' }); } catch (error) { console.error('授权失败', error); } ``` #### 选取图片 利用`uni.chooseImage()`函数让用户挑选想要上传的照片。该函数允许指定可选参数如最大选择数量、原图还是压缩版等选项[^2]: ```javascript const res = await uni.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'] // 可以指定来源是相册还是相机，默认二者都有 }); console.log(res.tempFilePaths); // 输出所选图片路径数组 ``` #### 将本地资源转换成网络链接 一旦选择了图像之后，则需要将其上传至服务器获得永久存储位置。这里会用到`wx.uploadFile` API，在实际项目里可能还需要处理进度条显示等问题[^3]： ```javascript await new Promise((resolve, reject) => { const uploadTask = uni.uploadFile({ url: 'https://example.com/upload', // 替换成自己的服务器地址 filePath: res.tempFilePaths[0], name: 'file', formData: { user: 'test' }, success(uploadRes) { resolve(JSON.parse(uploadRes.data)); }, fail(err){ reject(err); } }); // 进度变化事件监听器 uploadTask.onProgressUpdate((progressRes) => { console.log(`上传进度 ${progressRes.progress}`); }); }); ``` 上述代码片段展示了如何在一个基于Vue.js构建的应用程序内部集成完整的图片上传逻辑。值得注意的是，具体的URL应该替换为指向自己后端服务的有效HTTP(S) URL，并且根据实际情况调整表单字段名称和其他细节设置。