1. 快速上手uni-file-picker多图上传第一次接触uniapp的uni-file-picker组件时我就被它的便捷性惊艳到了。这个组件开箱即用短短几行代码就能实现图片选择功能特别适合需要快速开发的项目。先来看个最简单的例子template uni-file-picker v-modelimageList fileMediatypeimage modegrid limit9 title最多选择9张图片 /uni-file-picker /template这个基础配置已经包含了几个关键参数fileMediatype设置为image表示只选择图片modegrid模式会以网格形式展示已选图片limit限制最多选择9张图片title在组件顶部显示的提示文字实际开发中我遇到过一个小坑当用户选择的图片超过限制数量时组件默认不会给出任何提示。后来我发现可以通过overlimit事件来处理uni-file-picker overlimithandleOverLimit // 其他参数... /uni-file-picker methods: { handleOverLimit() { uni.showToast({ title: 最多只能选择9张图片, icon: none }); } }2. 完整的上传流程实现图片选择只是第一步真正的挑战在于如何把图片上传到服务器。这里我分享一个经过多个项目验证的稳定方案。2.1 处理选择事件当用户选择图片后select事件会返回一个包含临时文件路径的对象handleSelect(res) { // res.tempFiles是包含所有选中图片信息的数组 const tempFiles res.tempFiles; // 显示加载状态 uni.showLoading({ title: 上传中..., mask: true }); // 使用Promise.all处理多图上传 Promise.all(tempFiles.map(file this.uploadSingleFile(file))) .then(results { uni.hideLoading(); // 处理上传成功后的逻辑 }) .catch(error { uni.hideLoading(); // 处理错误情况 }); }2.2 单文件上传实现uploadSingleFile方法封装了uni.uploadFile的核心逻辑uploadSingleFile(file) { return new Promise((resolve, reject) { uni.uploadFile({ url: https://your-api-endpoint.com/upload, filePath: file.path, name: file, formData: { // 可以附加其他表单数据 userId: 123 }, success: (uploadRes) { const data JSON.parse(uploadRes.data); resolve({ url: data.url, name: file.name }); }, fail: (err) { reject(err); } }); }); }这里有几个需要注意的点服务器返回的数据需要手动JSON.parse建议使用Promise包装上传逻辑方便处理多个文件formData可以用来传递额外的参数3. 高级功能与优化技巧3.1 图片删除功能实现删除功能看似简单但实际开发中我发现有几个细节需要特别注意handleDelete(e) { // 从服务器删除 this.deleteFromServer(e.tempFile) .then(() { // 从本地列表删除 const index this.imageList.findIndex( item item.url e.tempFile.url ); if (index ! -1) { this.imageList.splice(index, 1); } }) .catch(err { uni.showToast({ title: 删除失败, icon: none }); }); }3.2 上传进度显示提升用户体验的关键是让用户知道上传进度uni.uploadFile({ // ...其他参数 progress: (res) { const progress res.progress; console.log(上传进度 progress %); // 可以更新UI显示进度 } });4. 常见问题与解决方案4.1 图片压缩处理大图上传是个常见需求我推荐使用uni.compressImage APIuni.compressImage({ src: filePath, quality: 80, success: compressedRes { // 使用压缩后的路径上传 this.uploadFile(compressedRes.tempFilePath); } });4.2 跨域问题解决开发中经常遇到的跨域问题可以通过以下方式解决确保服务器配置了正确的CORS头在manifest.json中配置合法域名开发阶段可以在微信开发者工具中勾选不校验合法域名4.3 文件类型校验虽然前端做了限制但服务端校验同样重要// 前端校验 uni-file-picker file-extnamejpg,png,gif/uni-file-picker // 后端校验示例(Node.js) if (![image/jpeg, image/png].includes(file.mimetype)) { throw new Error(不支持的文件类型); }在实际项目中我建议前后端都做校验这样更安全可靠。