<view class="whiteblock main">
<mp-uploader
ext-class="my-uploader"
bindfail="uploadError"
bindsuccess="uploadSuccess"
select="{{selectFile}}"
upload="{{uplaodFile}}"
files="{{files}}"
binddelete="handleDelete"
delete
max-count="{{maxCount}}"
title="上传凭证"
tips="最多{{maxCount}}张">
</mp-uploader>
<canvas canvas-id='attendCanvasId' class='temp-canvas' style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>
</view>
data:{
files: [], // 初始展示图片
maxCount: 6,//最多上传张数
pics: [],// 上传到服务器的图片
promisePics: [], // 上传图片队列
// canvas压缩图片宽高
cWidth: 0,
cHeight: 0,
},
// 选择图片
selectFile(files) {
console.log('files', files)
// 返回false可以阻止某次文件上传
// const {tempFiles} = files
// if(tempFiles && tempFiles.length>0){
// for(let i=0;i<tempFiles.length;i++){
// if(tempFiles[i].size >= 3000000){
// wx.showToast({
// title: '上传图片不得超过3MB',
// icon: 'none'
// })
// return false
// }
// }
// }
},
// 上传图片方法
handleUpload(img){
return new Promise((resolve, reject) => {
const that = this
wx.uploadFile({
url: config.REQUEST_BASE_URL + uri.ToolsUploadImages, //上传图片接口
filePath: img,
name: 'file',
success (res){
// console.log(res)
if(res.errMsg == 'uploadFile:ok'){//上传成功
const data = wx.$common.toJSON(res.data)
if(data){
if(data.data && data.data.length>0){
let {pics, promisePics} = that.data
// console.log(pics)
pics.push(data.data[0])
promisePics.push(img)
that.setData({
pics,
promisePics
})
// resolve(img)
resolve()
}else{
reject(data.message)
}
}else{
reject(data)
}
}
}
})
})
},
// canvas压缩图片
getCanvasImg(imgInfo){
const _this = this
return new Promise((resolve, reject) => {
let ratio = 2;//压缩倍数
let {path, width, height} = imgInfo;
let cWidth = width, cHeight = height
while(cWidth > 800){
cWidth = Math.trunc(width / ratio)
cHeight = Math.trunc(height / ratio)
ratio++
}
this.setData({
cWidth,
cHeight
})
// 开始绘制
const ctx = wx.createCanvasContext('attendCanvasId');
ctx.drawImage(path, 0, 0, cWidth, cHeight);
ctx.draw(false, function(){
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
destWidth: cWidth,//输出的图片的宽度
destHeight: cHeight,//输出的图片的高度
fileType: 'jpg',//目标文件的类型
quality: 0.8,//图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
success(res) {
console.log(res.tempFilePath)//最终图片路径
_this.handleUpload(res.tempFilePath).then(_ => {
resolve()
})
},
fail(res) {
console.log(res.errMsg)
reject(res)
}
})
})
})
},
// 返回图片上传promise
imgPromise(item){
const _this = this
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: item,
success(res){
// console.log('ImageInfo', res)
_this.getCanvasImg(res).then(pImg => {
// console.log(pImg)
resolve(pImg)
}).catch(err => {
reject(err)
})
}
})
})
},
uplaodFile(files) {
// console.log('upload files', files)
const {tempFilePaths} = files
let promise = Promise.resolve()
tempFilePaths.map(item => {
// 异步队列
promise = promise.then(() => {
return this.imgPromise(item)
})
})
// 图片上传的函数，返回Promise，Promise的callback里面必须resolve({urls})表示成功，否则表示失败
return new Promise((resolve, reject) => {
promise.then(_ => {
// console.log(this.data.promisePics)
resolve({
urls: this.data.promisePics
})
// 清空上传图片队列
this.setData({
promisePics: []
})
})
})
},
// 删除图片
handleDelete(e){
// console.log(e)
const {index, item} = e.detail
let {pics} = this.data
pics.splice(index, 1)
this.setData({
pics
})
},
uploadError(e) {
console.log('upload error', e.detail)
},
uploadSuccess(e) {
console.log('upload success', e.detail)
},
