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

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

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

这里用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循环将数组中的图片给渲染出来就可以在页面中看到啦