uniapp 上传图片别裸传:我给每个上传都加了个 biz 参数
导读:求职小程序里上传点太多了------头像、简历照片、技能证书、企业营业执照、工作环境图......一开始就是个
/api/file/upload,传完返回个 URL 就完事。等到后台想把"证书类图片"和"头像"分开管理、分开审核时,傻眼了:所有图片混在一个目录里,根本分不清谁是谁。后来加了个biz参数,一劳永逸。
问题是怎么冒出来的
最初的上传代码长这样:
js
uni.uploadFile({
url: BaseUrl.baseUrl + "/api/file/upload",
filePath: url,
name: 'file',
success: (res) => {
let data = res.data;
let imgUrl = JSON.parse(data).message;
resolve(imgUrl);
}
});
功能没问题,但后台管理图片的时候全是问题。想找"某个用户的技能证书",得在 OSS 里按上传时间翻;想把"违规的营业执照"单独拎出来审查,根本没有维度。上传这个动作,缺了业务归属。
加 biz:一行 formData 的事
改起来其实简单,uni.uploadFile 本来就有 formData,加个业务标识就行:
js
uni.uploadFile({
url: BaseUrl.baseUrl + "/api/file/upload",
filePath: url,
name: 'file',
formData: {
biz: "worker/skill" // 业务维度:worker/skill 技能证书
},
success: (res) => {
let data = res.data;
let imgUrl = JSON.parse(data).message;
resolve(imgUrl);
}
});
后端 FileController 收到 biz 后,存 OSS 时拼进路径:uploads/{biz}/{yyyyMM}/{文件名}。于是目录天然按业务分开:
uploads/
├── avatar/ # 头像
├── resume/ # 简历附件
├── worker/skill/ # 技能证书
├── company/license/ # 营业执照
└── job/cover/ # 职位封面
别小看这个 biz 的命名
biz 值不是随便写的,我们定了套规范:{角色}/{场景} ,比如 worker/skill、company/license、job/cover。好处有两个:
- 后台审核能按
biz过滤------只审营业执照,不用在一堆头像里捞 - 权限控制能按
biz生效------有的业务目录只允许本人传,有的公开可读
一开始我图省事写成 skill、license 这种单词,后来越加越多,skill 和 skills 都能出现,数据库里脏数据一堆。规范比功能重要,命名不统一,后面全是坑。
上传失败也别静默
原代码 fail 里就打了行日志:
js
fail: (res) => {
console.log('上传失败', res);
}
用户那边呢?啥提示都没有,点了没反应,还以为是 bug。后来改成:
js
fail: (res) => {
uni.showToast({ title: '上传失败,请重试', icon: 'none' });
}
顺手把 fileList 里那个失败项的状态置成 fail,前端能重新上传。
跨端注意:H5 和 App 的 filePath 不一样
uni.uploadFile 三端行为有差异。小程序里 filePath 是临时文件路径,H5 里是 Blob 对象 ,App 里又有自己的临时目录。所以 biz 这层逻辑要放在统一封装的上传函数 里,别在页面里到处写 uni.uploadFile------页面只关心"传哪张图、什么业务",底层差异封装掉。


说点实在的
一个 biz 参数,改动量就几行,但把"上传"从一次性动作 变成了可管理的业务行为 。现在后台按业务维度筛图、按目录做 CDN 缓存策略、按 biz 做审核流,全都顺了。做上传功能的第一天,就把业务归属想清楚,别等图堆成山再回头补。
项目源码(uniapp 求职招聘小程序):https://gitee.com/gzqkl/job-uniapp