关于node图片上传接口和vue图片获取的问题

前言

这个问题困扰了我半个月之多,终于在询问了各位大佬的帮助下,终于是成功的解决了这个问题了,不多说了直接上代码

---

node图片上传接口

node使用的是express所以这边我演示也是使用express的

图片上传的接口的写法

const express = require('express')
const fs = require('fs')
const path = require('path')
const router = express.Router()


router.post('/file', function(req, res) {
    // 获取图片的所有信息
    let accouts = req.files[0]
    let user = req.user


    // 对用户的图片进行一个图片的更名
    // 这里名字更改的方法是使用计算机生成的名字 加 id 的方式对图片进行命名
    let oldFile = accouts.path;
    let newFile = '引号里写图片的路径' + accouts.filename + user.id + path.parse(accouts.originalname).ext
    fs.rename(oldFile, newFile,(err)=>{
        if(err)console.log(err)
    })



    // 接下来把图片的路径写到数据库里
    let userimg = '引号里写图片的路径'+accouts.filename + user.id+path.parse(accouts.originalname).ext

    // 我这里是封装了 mysql 的数据更新方法的(可以使用自己的封装的mysql方法)
    updateData('users',userimg,user.id,(err,resulit)=>{
        if(err){
            console.log('数据库报错了')
            console.log(err)
        }
    })
    res.status(200).send({
        err:0,
        msg:'图片上传成功'
    })
 
})

---

配置静态资源托管

在app.js里配置一下静态资源

注 : 这里我使用的是 express 所以配置静态资源的时候也是调用 express 里的方法

//这里设置的是图片的根目录 (我图片的根目录是在 punlic 这个文件夹里的)
app.use(express.static('./public'))

注:因为设置了静态资源托管所以在 图片上传接口的userimg 里不能写有 ./public 否则拿不到图片

---

前端部分

前端我使用的是vue+elementui搭建的一下小项目

前端就直接把存在数据库里的路径获取之后渲染到<img> 标签里就可以了

---

最后

啊…差点就直接把这个项目给放弃了,还好坚持了一下,不然就真的做不出来了

此文章为博主原创,转载请告知