多图上传和水印都是比较难得，特别是有的api只支持在小程序用，h5不给用

效果图

普通的多图上传

// 多图上传
// count：最大数量
export function headerUploads0(count = 9, orderNumber = '', watermarkInfo) {return new Promise((resolve, reject) => {let UploadList = []uni.chooseImage({// 最多可以选择的图片总数count,success: async res => {let processedFiles = res.tempFilePathsif (watermarkInfo) {// 创建列式水印文本数组const watermarkLines = [`订单号: ${watermarkInfo.number}`,`买  家: ${watermarkInfo.traderName}`,`卖  家: ${watermarkInfo.sellerTraderName}`,`资金方: ${watermarkInfo.capitalTraderName}`,`时  间: ${format(new Date(), false)}`];// 批量添加水印}//启动上传等待中...  uni.showLoading({title: '上传中',});await Promise.all(processedFiles.map((item, index) => {return new Promise((resolve1, reject1) => {console.log('上传');uni.uploadFile({// 上传地址url: BASE_URL + VUE_APP_BASE_API +'/AppBusiness/AppCommon/UploadFile',name: 'file',filePath: processedFiles[index],formData: {FileNameType: 3,FileDir: orderNumber || '',ClassifyType: orderNumber ? 'order' : ''},header: {"Authorization": (store.state.token ||uni.getStorageSync('token')) ?'Bearer ' + (store.state.token ||uni.getStorageSync('token')) :''},success: (resz) => {console.log('后端返回', (JSON.parse(resz.data).data));uni.hideLoading()UploadList.push(JSON.parse(resz.data).data)resolve1()},fail: (resz) => {console.log('失败返回', resz);uni.hideLoading()reject1()}})});})).then(() => {console.log('循环后', UploadList);resolve(UploadList)}).catch((error) => {console.log('循环后', UploadList);resolve(UploadList)})},complete: compRes => {}});})
}

带水印的多图上传

在组件页面那需要加个空画布用来操作

// vue页面上
<!-- 隐藏的Canvas，用于绘制水印（全端兼容）-->
<canvas canvas-id="watermarkCanvas":style="{position: 'absolute', top: '0', left: '-1000vw', width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>// 引入下面的函数tools.js是我的封装js,别搞错了
import {headerUploads, // 多图上传
} from "@/utils/tools.js"// data数据中
canvasWidth: 500, // 动态绑定Canvas宽高
canvasHeight: 500// js中调用 
// 参数 多少张图片3张，携带的订单号(不重要我这边上传后端要) Y12345， 订单信息 this.watermarkInfo， this 用来设置canvasWidth的
headerUploads(3, 'Y12345', this.watermarkInfo, this)

函数–封装的tools.js中

/*** 跨平台图片压缩（兼容小程序和H5）* @param {string} filePath 原始图片路径* @param {number} [quality=0.7] 压缩质量（0-1）* @param {number} [maxWidth=1024] 最大宽度* @param {number} [maxHeight=1024] 最大高度* @return {Promise<string>} 压缩后的图片路径*/
export function compressImage(filePath, quality = 0.8, maxWidth = 1024, maxHeight = 1024) {return new Promise((resolve, reject) => {// 平台判断// #ifdef MP-WEIXIN// 微信小程序使用官方APIwx.compressImage({src: filePath,quality: Math.floor(quality * 100), // 微信使用0-100整数success: (res) => resolve(res.tempFilePath),fail: reject});// #endif// #ifdef H5// H5使用Canvas压缩const img = new Image();img.crossOrigin = 'anonymous';img.src = filePath;img.onload = () => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 计算压缩尺寸let width = img.width;let height = img.height;if (width > maxWidth) {height *= maxWidth / width;width = maxWidth;}if (height > maxHeight) {width *= maxHeight / height;height = maxHeight;}canvas.width = width;canvas.height = height;// 绘制压缩图片ctx.drawImage(img, 0, 0, width, height);console.log(666);// 获取压缩结果canvas.toBlob((blob) => {const reader = new FileReader();reader.onload = () => resolve(reader.result);reader.readAsDataURL(blob);},'image/jpeg',quality);};img.onerror = reject;// #endif// 其他平台（如App）或未处理平台返回原图// #ifndef MP-WEIXIN, H5resolve(filePath);// #endif});
}// 多图上传（带水印功能）
export function headerUploads(count = 9, orderNumber = '', watermarkInfo, pageContext) {return new Promise((resolve, reject) => {uni.chooseImage({count,success: async res => {try {const tempFiles = res.tempFilePaths;let processedFiles = tempFiles;// 如果需要加水印if (watermarkInfo && watermarkInfo.number) {const watermarkLines = [`时  间: ${format(new Date(), false)}`,`资金方: ${watermarkInfo.capitalTraderName || ''}`,`卖  家: ${watermarkInfo.sellerTraderName || ''}`,`买  家: ${watermarkInfo.traderName || ''}`,`订单号: ${watermarkInfo.number}`];// 串行处理水印（确保画布状态独立）processedFiles = [];for (const imgPath of tempFiles) {try {const watermarked = await addWatermarkByContext(imgPath, watermarkLines, pageContext);processedFiles.push(watermarked);} catch (e) {console.error('水印处理失败，使用原图:', e);processedFiles.push(imgPath); // 失败时使用原图}}}// 上传所有处理后的文件const UploadList = await uploadAllFiles(processedFiles, orderNumber);resolve(UploadList);} catch (e) {reject(e);}},fail: reject});});
}// 重置画布状态（关键解决画布污染问题）
function resetCanvasContext(pageContext) {if (!pageContext) return;// 重置画布尺寸（避免上一张图片的尺寸影响）pageContext.canvasWidth = 0;pageContext.canvasHeight = 0;// 清除画布内容const ctx = uni.createCanvasContext('watermarkCanvas', pageContext);ctx.clearRect(0, 0, pageContext.canvasWidth || 500, pageContext.canvasHeight || 500); // 清除超大区域确保干净ctx.draw(); // 立即执行清除
}// 具体的加水印
function addWatermarkByContext(imgPath, watermarkLines, pageContext) {// 无需水印直接返回原图if (!watermarkLines || watermarkLines.length === 0 || !pageContext) {return Promise.resolve(imgPath);}return new Promise((resolve, reject) => {// 1. 先重置画布状态（关键步骤）resetCanvasContext(pageContext);// 2. 获取原图信息uni.getImageInfo({src: imgPath,success: (imgInfo) => {const { width: imgWidth, height: imgHeight } = imgInfo;const dpr = 1// uni.getSystemInfoSync().pixelRatio;let dpr2 = uni.getSystemInfoSync().pixelRatio// 3. 设置画布尺寸（使用原图尺寸）pageContext.canvasWidth = imgWidth * dpr;pageContext.canvasHeight = imgHeight * dpr;const maxCanvasSize = 4096; // 大多数设备的限制if (imgWidth * dpr > maxCanvasSize || imgHeight * dpr > maxCanvasSize) {const scale = Math.min(maxCanvasSize/(imgWidth*dpr), maxCanvasSize/(imgHeight*dpr));pageContext.canvasWidth = imgWidth * dpr * scale;pageContext.canvasHeight = imgHeight * dpr * scale;}// 4. 创建画布上下文const ctx = uni.createCanvasContext('watermarkCanvas', pageContext);ctx.scale(dpr, dpr);// 5. 绘制原图ctx.drawImage(imgPath, 0, 0, imgWidth, imgHeight);// 6. 绘制水印const fontSize = 28 * dpr2;const lineHeight = fontSize + 8;const margin = 20 * dpr2;ctx.setFontSize(fontSize);ctx.setFillStyle('#3975e2');ctx.setTextAlign('left');ctx.setTextBaseline('bottom');console.log(777);watermarkLines.forEach((line, index) => {const y = imgHeight - margin - (index * lineHeight);ctx.fillText(line, margin, y);});// 7. 延迟确保绘制完成setTimeout(() => {ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: 'watermarkCanvas',destWidth: imgWidth,destHeight: imgHeight,fileType: 'jpg',quality: 0.9,success: (res) => {// 8. 再次重置画布（为下一张图准备）resetCanvasContext(pageContext);resolve(res.tempFilePath);},fail: (err) => {resetCanvasContext(pageContext);reject(new Error(`Canvas转图片失败: ${JSON.stringify(err)}`));}}, pageContext);});}, 300); // 适当延迟确保绘制完成},fail: (err) => {reject(new Error(`获取图片信息失败: ${JSON.stringify(err)}`));}});});
}