我们知道在项目中经常要在一些字段中存储图片。比如说存储用户信息时可能需要保存用户头像图片(一般为url)。或者数据库中有一个“日志”实体,“日志”表中需要一个图片字段来存储图片(一般为url)。

但是如果 一个实体 需要存储多张图片时该怎么办呢。比如说现在有一张工作日志表,要求除了表中有工作日志的一些字段之外,还要求表中每一条工作日志记录能够有且多张工作图片。那么有两种方法

方法一

新建一张“工作图片表”。因为工作日志和工作图片是一对多的关系,故在工作图片表用一个字段作为外键存储工作日志id,另一个字段则存储该工作日志的图片。这种方法比较容易想到不再赘述。

方法二

新建工作图片表,在查询时需要联表查询。如果不新建表能不能存多张图呢,也可以

那就是存储工作图片的url数组,以前端vue举例

上传多张图片时套用element-ui的模板

这个el-upload组件可以多次选择图片,action配置上传的后端地址,后端返回图片url,on-success配置每次上传成功后调用的方法。
在这里插入图片描述
如图所示,每选择一张图片上传后,后端会返回图片的url。前端将url存到diary_img数组中,之后数据库字段中存的就是数组转换为字符串的形式,在字符串中url用逗号隔开。
在这里插入图片描述
取图片时取的也是数组的字符串形式,取出来后用split(‘,’)方法能将图片url字符串还原为图片url数组。vue中用v-for显示url数组即可。
在这里插入图片描述

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐