uniapp单图上传，带图片压缩，水印方法

<template>
    <view>
        <!-- 现场图片 -->
        <view class="form-group">
          <view class="form-label required">现场图片</view>
          <view class="upload-wrap">
            <view class="image-list">
              <view class="image-item" v-for="(img, index) in imageList" :key="index">
                <image class="upload-image" :src="domain + img" mode="aspectFill" @click="previewImage(index)"></image>
                <view class="delete-btn" @click="deleteImage(index)">
                  <text>✕</text>
                </view>
              </view>
              <view class="add-btn" @click="chooseImage" v-if="imageList.length < maxImageCount">
                <text class="add-icon">+</text>
                <text class="add-text">拍照/上传</text>
              </view>
            </view>
            <!-- <text class="upload-tip">最多可上传{{ maxImageCount }}张现场照片</text> -->
          </view>
        </view>

        <!-- Canvas 尺寸动态绑定 -->
        <canvas 
            canvas-id="watermarkCanvas" 
            style="position: absolute; left: -9999px; top: -9999px;"
            :style="{
                width: canvasWidth + 'px',
                height: canvasHeight + 'px'
            }"
        ></canvas>
    </view>
</template>

<script>
    import CommonUtils from '../../utils/common.js'
    import http from '@/utils/http.js'
    import config from "@/config.js"
    export default {
        data() {
            return {
                maxImageCount: 1,
                imageList: [],
                domain: config.domain,
                canvasWidth: 300,
                canvasHeight: 300,
            }
        },
        methods: {

            // 选择图片
            async chooseImage() {
              uni.chooseImage({
                count: 1, // 最多选择的图片数量，可以根据需求修改
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: async (res) => {
                    // 选择图片成功
                    const tempFilePaths = res.tempFilePaths

                     // 现在 result 会得到正确的结果
                    const data = await CommonUtils.uploadImage(this.action, tempFilePaths[0]);
                    console.log("data", data); // 这里会正确输出
                    if (data.code == 0) {
                      // 根据类型设置对应的表单字段
                       let image = data.data || data.data.img || data.data.url;
                       this.formData.image = image
                       this.formData.images.push(image)
                        this.imageList.push(image)
                      uni.showToast({
                        title: '上传成功',
                        icon: 'success'
                      });
                    } else {
                      throw new Error(data.message || '上传失败');
                    }
                },
                fail: (err) => {
                  // 选择图片失败
                  console.log('选择图片失败：', err.errMsg);
                }
              })
            },

            // 预览图片
            previewImage(index) {
              uni.previewImage({
                urls: this.imageList,
                current: index
              })
            },

            // 删除图片
            deleteImage(index) {
              uni.showModal({
                title: '提示',
                content: '确定删除这张图片吗？',
                success: (res) => {
                  if (res.confirm) {
                    this.imageList.splice(index, 1)
                    this.formData.images.splice(index, 1)
                  }
                }
              })
            },

        }
    }
</script>

<style>

/* 图片上传区域 */
.upload-wrap {
  margin-top: 8rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.upload-image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 44rpx;
  height: 44rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
}

.add-btn {
  width: 200rpx;
  height: 200rpx;
  background: #f8f9fc;
  border-radius: 16rpx;
  border: 2rpx dashed #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
}

.add-icon {
  font-size: 60rpx;
  color: #ccc;
}

.add-text {
  font-size: 24rpx;
  color: #999;
}

.upload-tip {
  font-size: 22rpx;
  color: #bbb;
  margin-top: 16rpx;
  display: block;
}

</style>

common.js文件同多图上传的