uniapp 多张图片压缩成一个文件上传使用上面适配uniapp的loadImage函数-Go服务器开发

要将多张图片压缩成一个文件并上传，在适配uniapp的loadImage函数基础上，您可以按以下步骤进行操作：

修改loadImage函数，使其接收一个包含多个图片url的数组作为参数。
遍历图片数组，使用Promise.all来异步加载所有图片，并在加载完成后执行压缩和合并的操作。
压缩和合并可以使用canvas绘制的方式，将每张图片绘制到同一个canvas上。请注意，由于canvas有大小限制，如果需要处理较大数量或较大尺寸的图片，请确保对图片进行合理裁剪或压缩。
最后，将合并后的canvas转换为文件，并通过uni.uploadFile方法上传到服务器。

下面是示例代码：

function compressAndUploadImages(imageUrls) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 获取最大宽高
    let maxWidth = 0;
    let maxHeight = 0;
    for (let i = 0; i < imageUrls.length; i++) {
      const url = imageUrls[i];
      uni.getImageInfo({
        src: url,
        success: (res) => {
          if (res.width > maxWidth) {
            maxWidth = res.width;
          }
          if (res.height > maxHeight) {
            maxHeight = res.height;
          }

          // 绘制图片到canvas
          const img = new Image();
          img.crossOrigin = 'anonymous';
          img.onload = () => {
            ctx.drawImage(img, 0, 0);
          };
          img.onerror = (error) => {
            reject(error);
          };
          img.src = url;
        },
        fail: (error) => {
          reject(error);
        }
      });
    }

    // 设置canvas尺寸
    canvas.width = maxWidth;
    canvas.height = maxHeight;

    // 将canvas转换为文件并上传
    canvas.toBlob((blob) => {
      const formData = new FormData();
      formData.append('file', blob, 'compressed_image.png'); // 指定上传的文件名和类型

      uni.request({
        url: 'your_upload_url',
        method: 'POST',
        data: formData,
        header: {
          'Content-Type': 'multipart/form-data'
        },
        success: (res) => {
          resolve(res.data);
        },
        fail: (error) => {
          reject(error);
        }
      });
    }, 'image/png'); // 根据需要指定压缩后的图片格式
  });
}

// 使用示例
const imageUrls = ['url1', 'url2', 'url3']; // 替换为实际的图片url数组
compressAndUploadImages(imageUrls)
  .then((response) => {
    console.log(response); // 处理上传成功的响应结果
  })
  .catch((error) => {
    console.error(error); // 处理上传失败或错误信息
  });

请根据您的实际需求和服务器接口进行相应调整，并确保代码适配uniapp框架。

内容由零声教学AI助手提供，问题来源于学员提问