uniapp,上传图片添加水印

视图：

<view class="upload-wrap bg-cell">
                <u-upload width="120rpx" height="120rpx" :fileList="fileList" @afterRead="afterRead"
                    @delete="deltetFile" multiple :maxCount="9">
                </u-upload>
                <view> 点击上传图片文件，最多上传9张 </view>
            </view>


    <view style='width:0px;height:0px;overflow:hidden;'>
        <canvas canvas-id="cid" :style="{height:`${cvHeight}px`,width:`${cvWidth}px`}"></canvas>
    </view>    

数据：
cvHeight: 0,fileList: [],
cvWidth: 0,

方法：

async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)

            // 用于存储符合条件的图片
            let Images = [];
            // 遍历上传的每张图片
            for (let i = 0; i < lists.length; i++) {
                const item = lists[i];

                // 验证图片格式
                const isImage = /\.(png|jpe?g)$/i.test(item.url);
                if (!isImage) {
                    uni.showToast({
                        title: '只能上传png，jpg，jpeg格式的图片',
                        icon: 'none',
                        duration: 3000
                    });
                    // 删除不符合条件的图片
                    lists.splice(i, 1);
                    // 跳过当前图片，进行下一张图片的验证
                    continue;
                }
                // 验证图片大小
                const maxSize = 2 * 1024 * 1024; // 2MB大小限制
                if (item.size > maxSize) {
                    uni.showToast({
                        title: '图片大小不能超过2MB',
                        icon: 'none',
                        duration: 3000
                    });
                    // 删除不符合条件的图片
                    lists.splice(i, 1);
                    // 跳过当前图片，进行下一张图片的验证
                    continue;
                }
                Images.push(item)
            }


            let fileListLen = this.fileList.length
            Images.map((item) => {
                this.fileList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            const _this = this;
            let waterUrl 
            for (let i = 0; i < Images.length; i++) {
                const tpurl = lists[i].url;
                uni.getImageInfo({
                    src: tpurl,
                    complete: function (image) {
                        // 动态设置canvas宽高
                        _this.cvHeight = image.height;
                        _this.cvWidth = image.width;
                      _this.imgToCanvas(tpurl, image.width, image.height,fileListLen);    
                        fileListLen++
                        console.log('fileListLen2',fileListLen)                        
                    }
                });
                
            }

        },


async imgToCanvas(url, width, height,fileListLen) {
              const nowDate = new Date();
                const year = nowDate.getFullYear();
              const month = String(nowDate.getMonth() + 1).padStart(2, '0');
              const day = String(nowDate.getDate()).padStart(2, '0');
                const week = String(nowDate.getDay());
                const hour = String(nowDate.getHours()).padStart(2, '0');
              const minute = String(nowDate.getMinutes()).padStart(2, '0');
                const { userName }  = uni.getStorageSync("userInfo");
             return await new Promise((resolve,reject) => {
                 const ctx = uni.createCanvasContext('cid');
                 ctx.drawImage(url, 0, 0,width,height);
                 // 设置水印的位置
                 ctx.fillStyle = "#dddddd";
                 ctx.fillRect(20, 10, 6, 60);//xywh
                 ctx.font="24px Georgia";
                 ctx.fillStyle = "#dddddd";
                 ctx.fillText(`${hour}:${minute}`, 35, 30); // 时分
                 ctx.fillText(`${year}.${month}.${day}   ${weekObj[week]}`, 35, 55); //日期

                 ctx.fillRect(20, 100, 6, 60);//xywh
                 ctx.fillText(userName, 35, 125); // 用户名
                 ctx.fillText(this.locationName, 35, 155); // 位置
                 ctx.draw()
                 //绘制到canvas上
                 const timer = setTimeout(() => {
                     uni.canvasToTempFilePath({
                         canvasId: 'cid',
                         // fileType: 'jpg',
                         success: (res) => {
                        console.log('re1',res,fileListLen)
                        resolve(res.tempFilePath); // 将添加的水印保存minio    
                        this.setFilePath(res.tempFilePath,fileListLen); // 将添加的水印保存minio    
                     },
                     fail: (err) => {
          reject(err);
        }
                }, this)
                clearTimeout(timer)
            }, 500)
            })
            
        },

//上传图片

     uploadFilePromise(url) {
            // 回调函数方法
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: this.commonAction,
                    filePath: url,
                    name: 'file',
                    header: {
                        token: uni.getStorageSync('userToken')
                    },
                    formData: {
                        folder: "CRM/sign/"
                    },
                    success: (res) => {
                        console.log(res, 'uploadFilePromise');
                        if (res.statusCode == 200) {
                            resolve({
                                url: JSON.parse(res.data).data,
                                status: 'success'
                            })
                        } else {
                            resolve({
                                url: url,
                                status: 'failed'
                            })
                        }
                    }
                });
            })
        },
async setFilePath(path,fileListLen){
            const result = await this.uploadFilePromise(path)
                let item = this.fileList[fileListLen]
                this.fileList.splice(fileListLen, 1, Object.assign(item, {
                    status: result.status,
                    message: result.status == 'failed' ? '上传失败' : '',
                    url: result.url
                }))
                this.form.images = this.fileList.filter(file => file.status === 'success').map(item => item.url)
        },