<view class="upload_view">
<block wx:for="{{pics}}" wx:key="*this">
<view class="q_image_wrap">
<!-- 图片缩略图 -->
<image class="q_image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
<!-- 移除图片的按钮 -->
<view class="q_image_remover" data-idx="{{index}}" bindtap="removeImage">
<i-icon type="close" size="14" class="icon" />
</view>
</view>
</block>
<view class='uploadImg_btn' bindtap="chooseImage" wx:if="{{pics.length < 9}}">
<image src="../../img/upload.png"></image>
</view>
</view>
//选择图片
chooseImage(e) {
console.log(e)
var that = this;
var pics = this.data.pics;
//---------------------多张上传----------------------------------------------------------------------------------------
wx.chooseImage({
count: 9 - pics.length, // 最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function (photo) {
//图片大小，限制10M以内
for (var i = 0; i < photo.tempFiles.length; i++) {
if (photo.tempFiles[i].size >= 10 * 1024 * 1024) {
console.log('请上传10M以内的图片');
return;
}
}
var imgsrc = photo.tempFilePaths;
//页面上展示的是原图片========pics数组
pics = pics.concat(imgsrc);
that.setData({
pics: pics
});
console.log(that.data.pics)
that.getCanvasImg(0, 0, photo.tempFilePaths); //进行压缩
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
//压缩并获取图片，这里用了递归的方法来解决canvas的draw方法延时的问题
getCanvasImg: function (index, failNum, tempFilePaths) {
var that = this;
let imagesPress = that.data.imagesPress;
if (index < tempFilePaths.length) {
wx.getImageInfo({
src: tempFilePaths[index],
success: function (res) {
//---------利用canvas压缩图片--------------
var ratio = 2;
var canvasWidth = res.width //图片原始长宽
var canvasHeight = res.height
while (canvasWidth > 400 || canvasHeight > 400) {// 保证宽高在400以内
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
that.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight,
})
const ctx = wx.createCanvasContext('photo_canvas');
ctx.drawImage(tempFilePaths[index], 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, function () {
index = index + 1;//上传成功的数量，上传成功则加1
wx.canvasToTempFilePath({
canvasId: 'photo_canvas',
success: function success(res) {
console.log('最终图片路径' + res.tempFilePath)//最终图片路径
imagesPress.push(res.tempFilePath);
console.log(that.data.imagesPress)
that.setData({
imagesPress: imagesPress
})
that.uploadCanvasImg(res.tempFilePath);
that.getCanvasImg(index, failNum, tempFilePaths);
}, fail: function (e) {
failNum += 1;//失败数量，可以用来提示用户
that.getCanvasImg(inedx, failNum, tempFilePaths);
}
});
});
}
})
}
},
//上传图片
uploadCanvasImg: function (canvasImg) {
const {$Toast} = require('../../dist/base/index');
var that = this;
let attachmentId = that.data.attachmentId
var tempImg = canvasImg;
wx.showLoading({
title: '上传中...',
});
wx.uploadFile({
url: app.globalData.baseUrl + '/api/upload',//文件服务器的地址
filePath: tempImg,
header: {
'Content-type': 'multipart/form-data',
'token': wx.getStorageSync('token')
},
// formData: {
// },
name: 'file',
success: function (res) {
wx.hideLoading()
$Toast({
content: '上传成功！'
});
console.log(res)
}
})
},
//删除图片
removeImage(e) {
var that = this;
var pics = that.data.pics;
var imagesPress = that.data.imagesPress;
// 获取要删除的第几张图片的下标
const idx = e.currentTarget.dataset.idx
// splice 第一个参数是下表值 第二个参数是删除的数量
pics.splice(idx, 1)
imagesPress.splice(idx, 1)
this.setData({
pics: pics,
imagesPress: imagesPress
})
console.log(that.data.imagesPress)
},
//预览图片
handleImagePreview(e) {
const idx = e.target.dataset.idx
const pics = this.data.pics
wx.previewImage({
current: pics[idx], //当前预览的图片
urls: pics, //所有要预览的图片
})
},
