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

<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,  //所有要预览的图片
        })
    },