Vue上传多张图片到服务器，数据库存储图片路径并将图片渲染到前端
用户投稿 学习笔记 21阅读
之前还说过将图片转base64码后上传，感兴趣的小伙伴可以移步
Vue使用Element-ui表单发送数据和多张图片到后端_vv-柠檬茶的博客-CSDN博客
这里用MySQL数据库来存储图片路径，存储图片路径有两种方法，
第一种是直接在表中字段存储多张图片的路径，通过特殊符号加以区别，例如图片1地址/图片2地址/图片3地址，取出来的时候通过字符串的split（）方法进行分割
第二种是新建一个表，表中存储图片地址和商品id，一个商品id对应多个图片路径即可
我这里用的是第一种
步骤：
1，使用element-ui 中的upload组件进行上传多张图片
<el-upload list-type="picture-card" action="#" ref="upload" :auto-upload="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :multiple="true" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog>通过this.$refs.upload.uploadFiles 来获取上传的图片路径，保存在表单通过接口上传表单数据
const fileArray = this.$refs.upload.uploadFiles; console.log(fileArray) const fd = new FormData(); for(let i = 0; i < fileArray.length; i++) { fd.append('picname', fileArray[i].raw); } fd.append('data',JSON.stringify(data)) this.$axios.post('/api/addBook',fd,{headers:{'Content-Type':'multipart/form-data'}}) .then(res => { console.log(res.data); })2，撰写后端接口，这里用Node写的后端
exports.addBook = function(req,res){ //将文件上传到指定的文件夹，multipart/form-data主要用来处理表单，uploadDir是Form其中一个参数 let form=new multiparty.Form({uploadDir:path.join(__dirname,'../image/bookpic')}); //解析包含表单数据的传入节点.js请求。这将导致表单基于传入请求发出事件 form.parse(req,(err,fileds,files)=>{ let userData=JSON.parse(fileds.data); const img = [] for(let i = 0; i < files.picname.length;i++){ const name = files.picname[i].originalFilename; bookName = name.substring(name.length - 9); img.push('/'+bookName) } console.log(img) // 要保存的文件名 userData.picname = img.join(',') })}form表单解析后图片路径保存在files中，通过for循环将图片进行重命名，保存到img数组中 console img数组的结果 [ '/45750.jpg', '/magic.jpg' ]
join方法是对数组进行转字符串操作进行保存到数据库，数据库中保存的字段如下图
3，在前端中将保存的图片渲染出来，写getBookInfo接口，
exports.getBookInfo = function(req,res){ let sql = 'SELECT a.*, b.avatar FROM book a ,user b where a.user_id = b.username' connection.query(sql,(req,results)=>{ if(results.length>0){ results.forEach(item => { item.picname = item.picname.split('/').join('http://127.0.0.1:5000/goods/picname/') }); res.status(200).send({data:results}) }else{ res.status(401).send({msg:'未知错误'}) } })}在返回的结果中通过forEach循环对picname进行更改，从数据库中取出来的数据是1.jpg,/2.jpg的形式，需要变成 http://xxx/1.jpg,http://xxx/2.jpg形式，结合字符串的split和join属性进行更改，接口返回http://xxx/1.jpg,http://xxx/2.jpg形式的数据
4，前端Vue渲染。此时前端已经可以获得到数据，但是http://xxx/1.jpg,http://xxx/2.jpg前端是不能渲染出来的，需要进行进一步的切割处理，使它变成一个数组，数组中包含两个元素，一个是http://xxx/1.jpg，另一个是http://xxx/2.jpg
this.messageList = product.data.data for(let i = 0;i < this.messageList.length;i++){ const strpic = this.messageList[i].picname.split(',') this.messageList[i].picname = strpic } console.log(this.messageList)将取出来的图片数据是字符串的形式，通过split（）方法把字符串转换为以‘，’切割的数组，此时messageList中的picname已经变成数组的形式了
后面只要通过v-for循环将数组中的图片给渲染出来就可以在页面中看到啦