uniapp 上传图片别裸传:我给每个上传都加了个 biz 参数

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/skillcompany/licensejob/cover。好处有两个:

  • 后台审核能按 biz 过滤------只审营业执照,不用在一堆头像里捞
  • 权限控制能按 biz 生效------有的业务目录只允许本人传,有的公开可读

一开始我图省事写成 skilllicense 这种单词,后来越加越多,skillskills 都能出现,数据库里脏数据一堆。规范比功能重要,命名不统一,后面全是坑。

上传失败也别静默

原代码 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

相关推荐
小程序开发X20 小时前
2026 深圳 APP 开发甄选:技术架构搭建、全流程落地、综合选型解读
微信小程序·小程序·app开发
Kingexpand_com20 小时前
培训机构排课管理小程序设计与功能实现思路
小程序·软件开发·小程序定制开发·培训排课·培训机构·排课小程序
扶风ff1 天前
练题簿企业培训方案:统一题库、在线任务与岗位考核
学习·小程序
AI行业应用研究1 天前
会务问答机器人落地拆解:三级路由、知识库组织与防幻觉——会务小程序能自己回答参会者提问吗?
大数据·人工智能·安全·小程序·架构
盟道科技1 天前
小程序订阅消息大规模投递实践:频控令牌池、Redis限流与失败补偿设计
分布式·算法·小程序
m0_587383001 天前
本地同城无人机作业接单系统源码:架构拆解与抢单调度实现
java·小程序·架构·需求分析
RuoyiOffice1 天前
SpringBoot3+Vue3+Flowable 企业审批平台全链路:从表单设计、节点权限到移动审批怎么落地
spring boot·vue3·uniapp·springboot3·flowable·审批系统·ruoyi office
2501_915909061 天前
怎么用 FlutterFlow 把应用发布到 App Store?
android·ios·小程序·https·uni-app·iphone·webview
白远山2 天前
家政服务家政社区派单实战:调度系统架构设计与实现指南
java·开发语言·小程序·架构·需求分析