Vue上传多张图片到服务器，数据库存储图片路径并将图片渲染到前端

之前还说过将图片转base64码后上传，感兴趣的小伙伴可以移步

Vue使用Element-ui表单发送数据和多张图片到后端_vv-柠檬茶的博客-CSDN博客

这里用MySQL数据库来存储图片路径，存储图片路径有两种方法，

第一种是直接在表中字段存储多张图片的路径，通过特殊符号加以区别，例如图片1地址/图片2地址/图片3地址，取出来的时候通过字符串的split（）方法进行分割

第二种是新建一个表，表中存储图片地址和商品id，一个商品id对应多个图片路径即可

我这里用的是第一种

步骤：

1，使用element-ui 中的upload组件进行上传多张图片

<el-uploadlist-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.datafor(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循环将数组中的图片给渲染出来就可以在页面中看到啦

Vue上传多张图片到服务器，数据库存储图片路径并将图片渲染到前端相关推荐

微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
Android-客户端上传多张图片到服务器功能实现
服务端: 需要两个jar包: commons-fileupload-1.2.1.jar commons-io-1.3.2.jar 代码: <span style="font-famil ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
vue上传zip文件到服务器,element+Vue上传zip文件
ref : 绑定DOM元素 action:接口地址 data : 你要传入的参数 on-preview:点击文件列表中已上传的文件时的钩子 name:文件的参数名 on-remove :移除你上传的文 ...
vue 上传视频到腾讯云存储并获取视频第一帧
官网文档链接:https://cloud.tencent.com/document/product/436/6268 需求项目里之前上传视频是调后端接口,接口将视频保存到服务器,然后返回视频链接. ...
Java IOS客户端上传多张图片到服务端
Java IOS客户端上传多张图片到服务端业务场景:用户相册需要上传多张图片到服务器,上限为12张.本文主要介绍Java服务端的文件和流的处理. 下图为iOS端和服务端最终结果一览. iOS端 : ...
微信小程序实现上传多张图片，删除图片
最近在做微信小程序,遇到上传多张图片到服务器,计算上传图片的张数,并且可以手动删除图片,下面是效果图效果图: 本来用的是小程序提供的 mp-uploader 上传图片的组件,无奈次组件删除效果不是我 ...
微信小程序选择多张图片连同表单中其他信息一起上传并保存到MySQL数据库
多读多写多记录,多学多练多思考.----------- Banana • Banuit Gang(BUG香柚帮) 最近在做小程序的多图片上传+连同表单信息和图片服务器端地址一起保存到数据库中这项功能, ...
VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整实现
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整 ...
mysql数据库上传ftp服务器中_备份部分mysql表并上传至指定ftp服务器目录中
防伪码:忘情公子著前几天领导安排了一个任务,让写一个脚本备份某mysql数据库中的部分表,并要将备份好的文件上传至某ftp服务器中,于是就有了以下的脚本 #!/bin/bash #Filename: ...

Vue上传多张图片到服务器，数据库存储图片路径并将图片渲染到前端

Vue上传多张图片到服务器，数据库存储图片路径并将图片渲染到前端相关推荐

最新文章

热门文章