uniapp小程序上传图片并压缩
html >> template部分:
<view class="mainBox"><uni-file-picker file-mediatype="image" mode="grid" limit="20" :value="uploadImgList":sourceType="['camera', 'album']" @select="uploadSelect" ref="filePicker"@delete="uploadDelete"></uni-file-picker>
</view>
script >> methods部分:
// 上传图片
uploadSelect(val) {val.tempFiles.forEach(async item => {try {// 压缩图片const compressedFilePath = await this.compressImage(item.url);// 将压缩后的图片转换为 Base64const base64Url = await this.becomeBase64img(compressedFilePath);this.uploadImgList.push({url: base64Url,uuid: item.uuid});this.imgBase64List.push(base64Url);} catch (error) {console.error('图片处理失败:', error);}})
},
// 压缩图片
compressImage(filePath) {return new Promise((resolve, reject) => {uni.compressImage({src: filePath,quality: 20, // 压缩质量,范围 0 - 100,数值越小,压缩率越高success: (res) => {resolve(res.tempFilePath);},fail: (err) => {reject(err);}});});
},
// 删除图片
uploadDelete(file) {for (let i = this.uploadImgList.length - 1; i >= 0; i--) {if (this.uploadImgList[i].uuid === file.tempFile.uuid) {this.uploadImgList.splice(i, 1);this.imgBase64List.splice(i, 1);}}
},
// 转义成base64图片
becomeBase64img(val) {return new Promise(function(resolve, reject) {pathToBase64(val).then(path => {resolve(path)}).catch(err => {reject(reject)})})
},