设计数据库:一条记录/一篇文章/一篇日志 关联存储多张图片
一条记录存多张图片
·
我们知道在项目中经常要在一些字段中存储图片。比如说存储用户信息时可能需要保存用户头像图片(一般为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数组即可。
更多推荐
已为社区贡献1条内容
所有评论(0)