1. 背景:
前期查找了很多图片压缩方法,但是uni.compressImage
不支持h5,而且只能压缩jpg文件,使用FileReader读取图片压缩不支持微信小程序,使用canvas.darw绘制无反应,。。。。
2. 解决办法:
使用helang-compress组件,组件支持App,小程序,h5.
此组件在插件市场下载次数4417次
3. 使用方法:
(1)在 script
中引用组件
import helangCompress from '../../components/helang-compress/helang-compress';
export default {
components: {
helangCompress
}
}
(2)在 template
中添加组件
<helang-compress ref="helangCompress"></helang-compress>
(3)源码示例:
// 示例代码较多,请大家下载 【示例项目ZIP】进行阅读
// 单张压缩
this.$refs.helangCompress.compress({
src:this.paths[0],
maxSize:800,
fileType:'jpg',
quality:0.85,
minSize:640 //最小压缩尺寸,图片尺寸小于该时值不压缩,非H5平台有效。若需要忽略该设置,可设置为一个极小的值,比如负数。
}).then((res)=>{
// 压缩成功回调
}).catch((err)=>{
// 压缩失败回调
})
// 批量压缩
this.$refs.helangCompress.batchCompress({
batchSrc:this.paths,
maxSize:800,
fileType:'jpg',
quality:0.85,
progress:(res)=>{
console.log('压缩进度');
console.log(res);
}
}).then((res)=>{
// 压缩成功回调
}).catch((err)=>{
// 压缩成功回调
})
4. 本文使用方法
<u-form-item label="选择照片" :required="true" prop="problemPhotos" borderBottom labelWidth="80" ref="item3">
<uni-file-picker
:source-type="sourceType"
:sizeType="sizeType"
v-model="fileList1"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@delete ="deletephoto"
@fail="fail"
ref="upload"
limit="9"
>
</uni-file-picker>
</u-form-item>
// // 选择上传触发函数
async select(e) {
let that = this;
// 根据所选图片的个数,多次调用上传函数
let promises=[]
for (let i = 0; i < e.tempFilePaths.length; i++) {
let url=e.tempFilePaths[i]
let imgtemp=e.tempFiles[i].file
const fileSize = imgtemp.size
console.log(fileSize)
console.log('压缩前文件' + url + '===大小'+fileSize)
//使用helangCompress组件压缩图片
that.$refs.helangCompress.compress({
src: url,
maxSize: this.compressParams.maxSize,
fileType: this.compressParams.fileType,
quality: this.compressParams.quality,
minSize: this.compressParams.minSize
}).then((res) => {
console.log("helangCompress压缩成功")
console.log(res)
this.compressUrl=res;
const promise =this.uploadFiles(this.compressUrl)
promises.push(promise)
}).catch((err) => {
uni.hideLoading();
uni.showToast({
title: "压缩失败",
icon: "none"
})
})
}
Promise.all(promises).then(()=>{
})
},