UNIAPP实战：5分钟搞定多图上传+预览+删除功能（附完整代码）

UNIAPP多图上传功能实战从零构建到性能优化在移动应用开发中图片上传功能几乎是社交、电商、内容发布等场景的标配需求。UNIAPP作为跨平台开发框架其图片处理能力直接影响用户体验。本文将带您从零开始构建一个支持多图上传、预览和删除的完整解决方案并深入探讨性能优化和边界情况处理。1. 基础功能实现1.1 项目初始化与页面结构首先创建一个UNIAPP项目在pages目录下新建imageUpload页面。以下是精简后的页面结构template view classcontainer !-- 上传按钮区域 -- view classaction-area button clickchooseImage选择图片/button button clickuploadAll :disabled!selectedImages.length上传全部/button /view !-- 图片预览网格 -- view classimage-grid view v-for(img, index) in selectedImages :keyimg.path classimage-item image :srcimg.path modeaspectFill clickpreviewImage(index)/image view classdelete-icon clickremoveImage(index)×/view /view /view /view /template1.2 核心功能实现在script部分实现主要逻辑export default { data() { return { selectedImages: [], // 存储图片对象数组 currentUploads: 0 // 当前上传计数 } }, methods: { // 选择图片 async chooseImage() { try { const res await uni.chooseImage({ count: 9, sizeType: [compressed], sourceType: [album, camera] }); // 转换为对象数组便于扩展属性 const newImages res.tempFilePaths.map(path ({ path, status: pending, progress: 0 })); this.selectedImages [...this.selectedImages, ...newImages]; } catch (err) { console.error(选择图片失败:, err); } }, // 删除图片 removeImage(index) { this.selectedImages.splice(index, 1); }, // 预览图片 previewImage(index) { uni.previewImage({ current: index, urls: this.selectedImages.map(img img.path) }); }, // 上传所有图片 async uploadAll() { if (!this.selectedImages.length) return; this.currentUploads 0; const uploadPromises this.selectedImages.map((img, index) this.uploadSingleImage(img, index) ); try { await Promise.all(uploadPromises); uni.showToast({ title: 全部上传成功, icon: success }); } catch (error) { console.error(上传出错:, error); } }, // 单张图片上传 uploadSingleImage(img, index) { return new Promise((resolve, reject) { const task uni.uploadFile({ url: YOUR_API_ENDPOINT, filePath: img.path, name: file, formData: { index }, success: (res) { if (res.statusCode 200) { this.$set(this.selectedImages[index], status, success); resolve(res.data); } else { reject(new Error(上传失败)); } }, fail: reject, complete: () { this.currentUploads; } }); // 监听上传进度 task.onProgressUpdate (res) { this.$set(this.selectedImages[index], progress, res.progress); }; }); } } }1.3 样式优化添加基础样式提升用户体验.container { padding: 20rpx; } .action-area { display: flex; justify-content: space-between; margin-bottom: 20rpx; } .image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rpx; } .image-item { position: relative; aspect-ratio: 1; border-radius: 8rpx; overflow: hidden; } .delete-icon { position: absolute; top: 5rpx; right: 5rpx; width: 40rpx; height: 40rpx; background: rgba(255,0,0,0.7); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }2. 高级功能扩展2.1 上传队列控制当需要上传大量图片时同时发起所有请求可能导致性能问题。我们可以实现一个队列控制系统// 在methods中添加 async uploadWithConcurrency(concurrency 3) { const queue [...this.selectedImages]; const results []; const executing []; while (queue.length) { if (executing.length concurrency) { await Promise.race(executing); } const image queue.shift(); if (!image) continue; const promise this.uploadSingleImage(image) .then(res { executing.splice(executing.indexOf(promise), 1); results.push(res); return res; }); executing.push(promise); } return Promise.all(executing).then(() results); }2.2 图片压缩处理在上传前对图片进行压缩可以显著减少上传时间和带宽消耗async compressImage(filePath, quality 0.7) { try { const res await uni.compressImage({ src: filePath, quality, compressedWidth: 1000, compressedHeight: 1000 }); return res.tempFilePath; } catch (err) { console.error(压缩失败:, err); return filePath; // 压缩失败返回原图 } }2.3 断点续传实现对于大文件上传断点续传功能可以提升用户体验// 修改uploadSingleImage方法 uploadSingleImage(img, index) { return new Promise((resolve, reject) { const xhr new XMLHttpRequest(); xhr.open(POST, YOUR_API_ENDPOINT, true); // 获取已上传大小需要服务端支持 const uploadedSize await this.getUploadedSize(img.name); const formData new FormData(); formData.append(file, { uri: img.path, type: image/jpeg, name: img.name }); xhr.setRequestHeader(X-Upload-Offset, uploadedSize); xhr.upload.onprogress (e) { const progress Math.round((e.loaded uploadedSize) / (e.total uploadedSize) * 100); this.$set(this.selectedImages[index], progress, progress); }; xhr.onload () { if (xhr.status 200) { resolve(xhr.responseText); } else { reject(new Error(上传失败)); } }; xhr.onerror reject; xhr.send(formData); }); }3. 性能优化策略3.1 内存管理优化处理多图时内存管理至关重要图片懒加载只加载可视区域内的图片图片尺寸控制限制选择的图片分辨率及时释放资源删除图片时释放内存// 在removeImage方法中添加资源释放 removeImage(index) { const removed this.selectedImages.splice(index, 1)[0]; if (removed removed.path) { uni.getFileSystemManager().unlink({ filePath: removed.path, fail: (err) console.warn(文件删除失败:, err) }); } }3.2 上传失败处理健壮的上传功能需要完善的错误处理机制// 增强版uploadSingleImage uploadSingleImage(img, index, retryCount 3) { return new Promise(async (resolve, reject) { let lastError; for (let i 0; i retryCount; i) { try { const result await this._doUpload(img, index); return resolve(result); } catch (error) { lastError error; await new Promise(res setTimeout(res, 1000 * (i 1))); } } this.$set(this.selectedImages[index], status, failed); reject(lastError); }); } _doUpload(img, index) { return new Promise((resolve, reject) { const task uni.uploadFile({ url: YOUR_API_ENDPOINT, filePath: img.path, name: file, success: (res) { if (res.statusCode 200) { this.$set(this.selectedImages[index], status, success); resolve(res.data); } else { reject(new Error(上传失败: ${res.statusCode})); } }, fail: reject }); task.onProgressUpdate (res) { this.$set(this.selectedImages[index], progress, res.progress); }; }); }3.3 用户体验优化上传状态可视化view classimage-item image :srcimg.path modeaspectFill/image view classstatus-overlay v-ifimg.status ! pending view classprogress-bar :style{width: img.progress %}/view view classstatus-text {{ img.status uploading ? ${img.progress}% : img.status success ? ✓ : × }} /view /view /view对应样式.status-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 8rpx; background: rgba(0,0,0,0.2); } .progress-bar { height: 100%; background: #4CAF50; transition: width 0.3s; } .status-text { position: absolute; top: 5rpx; right: 5rpx; background: rgba(0,0,0,0.7); color: white; border-radius: 50%; width: 30rpx; height: 30rpx; display: flex; align-items: center; justify-content: center; font-size: 20rpx; }4. 跨平台适配与测试4.1 平台差异处理不同平台可能有不同的行为表现chooseImage() { // 处理各平台count限制 const maxCount 9; let count maxCount - this.selectedImages.length; // 微信小程序有特殊限制 if (uni.getSystemInfoSync().platform devtools || uni.getSystemInfoSync().platform ios) { count Math.min(count, 9); } return uni.chooseImage({ count, sizeType: [compressed], sourceType: [album, camera], // 安卓特有配置 ...(uni.getSystemInfoSync().platform android ? { compressionLevel: 6 } : {}) }); }4.2 自动化测试策略为确保功能稳定性建议实现以下测试用例基础功能测试选择单张图片选择多张图片达到上限删除图片图片预览上传测试单张图片上传多张图片连续上传上传过程中断网测试上传失败重试性能测试大图片5MB上传同时上传10张以上图片低网络环境测试4.3 实际项目集成建议在实际项目中集成时考虑以下因素API安全上传接口需要实现鉴权文件命名避免文件名冲突CDN支持上传后返回CDN地址日志记录记录上传失败情况// 实际项目中更完善的上传方法示例 async uploadToProduction(img, index) { try { // 1. 获取上传凭证 const auth await this.getUploadToken(); // 2. 压缩图片 const compressedPath await this.compressImage(img.path); // 3. 计算文件hash const fileHash await this.calculateFileHash(compressedPath); // 4. 检查是否已上传 const exists await this.checkFileExists(fileHash); if (exists) { this.$set(this.selectedImages[index], status, success); return exists.url; } // 5. 实际上传 const result await this.uploadFile({ url: auth.uploadUrl, filePath: compressedPath, formData: { token: auth.token, key: ${fileHash}.jpg } }); // 6. 更新状态 this.$set(this.selectedImages[index], status, success); return result.url; } catch (error) { this.$set(this.selectedImages[index], status, failed); throw error; } }在开发过程中发现图片上传功能的稳定性很大程度上取决于对边界情况的处理。特别是在低网络环境下合理的重试机制和进度反馈能显著提升用户体验。对于电商类应用建议在上传前增加图片质量检查确保所有上传的图片都符合业务要求。