小程序多圖上傳並壓縮,帶預覽刪除功能

<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,  //全部要預覽的圖片
        })
    },