小程序多图上传并压缩,带预览删除功能

<view class="upload_view">
　　<block wx:for="{{pics}}" wx:key="*this">
　　　　="q_image_wrap">
　　　　　　<!-- 图片缩略图  -->
　　　　　　image ="q_image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image 移除图片的按钮  ="q_image_remover"="removeImage">
　　　　　　　　i-icon type="close" size="14" class="icon" />
　　　　　　</view　　</block>
　　='uploadImg_btn' bindtap="chooseImage" wx:if="{{pics.length < 9}}"src="../../img/upload.png">
>

 //选择图片
    chooseImage(e) {
        console.log(e)
        var that = this;
        var pics = this.data.pics;
        ---------------------多张上传----------------------------------------------------------------------------------------
        wx.chooseImage({
            count: 9 - pics.length, 最多可以选择的图片张数，默认9
            sizeType: ['original','compressed'],0); line-height: 1.5 !important;"> original 原图，compressed 压缩图，默认二者都有
            sourceType: ['album','camera'],0); line-height: 1.5 !important;"> 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,photo.tempFilePaths);  进行压缩
            },fail: function () {
                 fail
            },complete:  complete
            }
        })
    },

); ctx.drawImage(tempFilePaths[index],0,0,canvasWidth,canvasHeight); ctx.draw(false,255); line-height: 1.5 !important;">function () { index = index + 1;上传成功的数量，上传成功则加1 wx.canvasToTempFilePath({ canvasId: 'photo_canvas',255); line-height: 1.5 !important;">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,tempFilePaths); },255); line-height: 1.5 !important;">function (e) { failNum += 1;失败数量，可以用来提示用户 that.getCanvasImg(inedx,tempFilePaths); } }); }); } }) } },0); line-height: 1.5 !important;">上传图片 uploadCanvasImg: function (canvasImg) { const {$Toast} = require('../../dist/base/index'); this; let attachmentId = that.data.attachmentId var tempImg = canvasImg; wx.showLoading({ title: '上传中...',}); wx.uploadFile({ url: app.globalData.baseUrl + '/api/upload',0); line-height: 1.5 !important;">文件服务器的地址 filePath: tempImg,header: { 'Content-type': 'multipart/form-data','token': wx.getStorageSync('token') }, formData: { }, name: 'file',255); line-height: 1.5 !important;">function (res) { wx.hideLoading() $Toast({ content: '上传成功！' }); console.log(res) } }) },0); line-height: 1.5 !important;">删除图片 removeImage(e) { 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) },0); line-height: 1.5 !important;">预览图片 handleImagePreview(e) { const idx = e.target.dataset.idx const pics = this.data.pics wx.previewImage({ current: pics[idx],0); line-height: 1.5 !important;">当前预览的图片 urls: pics,0); line-height: 1.5 !important;">所有要预览的图片 }) },