由于uni-app h5 不支持sizeType,如果需要压缩图片就只能自己去实现了。
1. 选择图片:
uni.chooseImage({
count: 6, //默认9
// sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
let tempPaths = res.tempFilePaths
if(tempPaths.length + _this.imgList.length > 6) {
uni.showToast({
title: '上传图片最多可选6张',
icon: 'none'
})
} else {
_this.imgList = _this.imgList.concat(tempPaths)
_this.compressImage()
}
}
})
compressImage(){
for(let i in this.imgList){
let imgFile = this.imgList[i]
this.getImageInfo(imgFile)
}
},
2. 获取图片信息并压缩
// 获取图片信息
getImageInfo(src) {
let _this = this
uni.getImageInfo({
src,
success(res) {
console.log('压缩前', res)
let canvasWidth = res.width //图片原始长宽
let canvasHeight = res.height
let img = new Image()
img.src = res.path
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d')
canvas.width = canvasWidth / 2
canvas.height = canvasHeight / 2
ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2)
canvas.toBlob(function(fileSrc) {
let imgSrc = window.URL.createObjectURL(fileSrc)
console.log('压缩后', imgSrc)
_this.uploadFile(imgSrc)
})
}
})
},
3. 上传
// 上传图片
uploadFile(filePath) {
let _this = this
uni.uploadFile({
url: '/api/api/Profile/UploadImg',
name: 'file',
filePath,
formData: {},
success: (res) => {
let { data } = JSON.parse(res.data)
_this.imgResults.push(data)
},
fail: (err) => {
uni.showToast({
title: err.errMsg,
icon: 'none'
})
}
});
},