微信小程序拍照压缩图片大小上传

### 微信小程序拍照并压缩图片上传 #### 准备工作 为了实现微信小程序中拍照后压缩图片再上传的功能，需先配置`app.json`文件中的权限设置以及在页面的`.json`文件里声明所需的API、组件和样式表。 #### 页面布局设计 创建一个按钮用于触发摄像头拍摄动作，并预留展示已选图片的空间。通过WXML结构化视图来完成这一部分的设计[^1]。 ```html <!--index.wxml--> <view class="container"> <button type="primary" bindtap="chooseImage">选择图片</button> <image wx:if="{{tempFilePath}}" src="{{tempFilePath}}" mode="aspectFit"></image> </view> ``` #### JavaScript逻辑处理 编写JavaScript代码以控制用户交互流程，包括启动相机、选取照片、执行图像压缩及提交至服务器等环节。此过程涉及多个异步操作，因此建议采用async/await语法简化编程模型[^2]。 ```javascript // index.js Page({ data: { tempFilePath: '' }, async chooseImage() { const that = this; try { let res = await wx.chooseMedia({ // 使用chooseMedia替代旧版chooseImage API count: 1, mediaType: ['image'], sourceType: ['camera'], // 只允许使用相机拍摄 maxDuration: 60, camera: 'back' }); console.log('Selected image:', res.tempFiles); if (res.tempFiles.length > 0) { let compressedPath = await compressImage(res.tempFiles[0].tempFilePath); that.setData({ tempFilePath: compressedPath }); uploadImage(compressedPath).then((result)=>{ console.log(result); }).catch(err=>{ console.error(err); }) } } catch(error){ console.error('Error selecting or processing the image', error); } }, // 图片压缩函数 function compressImage(filePath) { return new Promise((resolve, reject) => { wx.compressImage({ src: filePath, quality: 80, // 设置压缩质量参数 success(res) { resolve(res.path); }, fail(err) { reject(new Error(`Failed to compress image ${err}`)); } }); }); } }); function uploadImage(path){ return new Promise((resolve,reject)=>{ wx.uploadFile({ url:getApp().globalData.clientUrl+'/uploadAvatarUrl', filePath:path, name:'file', formData:{}, success:(response)=>{ resolve(JSON.parse(response.data)) }, fail:error=>reject(error), }) }) } ``` 上述代码实现了从调用相机获取图片到压缩再到上传的一系列功能。其中，`compressImage()`负责调整所摄取的照片尺寸；而`uploadImage()`则用来向指定URL发送POST请求并将二进制数据流作为附件传递给远程Web服务[^3]。