设计数据库：一条记录/一篇文章/一篇日志 关联存储多张图片

我们知道在项目中经常要在一些字段中存储图片。比如说存储用户信息时可能需要保存用户头像图片（一般为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数组即可。