文章目录
- 前言
- 参考目录
- 多文件/图片上传的实现
- 流程测试
- 1、Web端
- 2、MinIO页面
- 小结
前言
今天遇到关于多图上传的需求,大致是:同时上传多张图片,拿到图片访问路径然后保存到数据库中。
其实这个也不算难题,解决思路也比较多,我一开始想到的是:后端接收一个待上传文件的集合,然后通过循环或者多线程的方式进行上传。
然后突然想到之前项目更新日志里面有提及支持多文件上传,再去看了一下。
V4.0.1 更新日志
一开始没有注意这里说的是前端组件,所以我以为后端的代码也做了更新,看了一眼 OSS 模块里面上传的代码发现没变化,然后我就有点懵了,去群里问了狮子大佬,大佬“一语惊醒梦中人”。
所以基于这个思路,我去找了一下资料来看,在这里小小总结一下。
参考目录
- element 官方文档 - Upload 上传 这是前端组件的官方文档,也有实例源码。
- 踩坑总结!elementUI组件之upload上传控件的multiple属性,设置false报错! 这是组件使用的示例博客,也有对官方文档 demo 的小分析。
- 并发任务执行的几种方法 (同时上传多张图片请求) 这是后端实现并发上传的几种方法,有兴趣可以看看。
多文件/图片上传的实现
上传组件的代码文件:ruoyi-ui/src/components/FileUpload/index.vue
组件属性
实现起来其实比较简单,在前端组件中加入 multiple
属性即可。(因为本人不是前端,所以就不在此分析底层逻辑了)
关于 OSS 模块上传的实现,在专栏之前的文章里面有过详细的分析,所以这里就不再赘述了。
流程测试
1、Web端
- 首页/系统管理/文件管理
选择多张图片:
上传示意:
上传完成:
查看控制台可以看到请求了两次 /system/oss/upload
接口:
2、MinIO页面
对比发现,上传成功。
小结
对于并发请求不大的情况下,使用这种并发上传的方式可以减少前后端的代码工作量,效率也高,还是比较值得推荐的方式。