上传图片nodejs+vue2+mysql

后端：

在入口文件app.js中  使用 中间件，将 目录中的图片托管为静态资源：

app.use('/uploads',express.static('uploads'))

对应数据库操作

...req.body是个扩展运算符 

exports.addArticle = (req, res) => {
    console.log(req.file);
    const path = require('path');
    if (!req.file || req.file.fieldname !== 'cover_img') return res.cc('文章封面是必选参数')
    const articleInfo = {
        ...req.body,
 // 文章封面在服务器端的存放路径
        cover_img: path.join('/uploads', req.file.filename),
        pub_date: new Date(),
        author_id: req.user.id
    }
    console.log( articleInfo)
    const sql = `insert into ev_article set  ? ,is_delete=0`
    const db = require('../db/index')
    db.query(sql, articleInfo, (err, results) => {
        if (err) return res.cc(err)
        if (results.affectedRows !== 1) return res.cc('发布文章失败')
        res.cc('发布文章成功', 0)
    })
}

这边记得打印一下

console.log( articleInfo)

cover_img的赋值可以 originalname  这个后面有后缀 但是赋值带不上去

所以推荐使用 filename

filename 在uploads文件里面就没有后缀的jpg

 originalname在uploads文件里面要自己手动添加jpg

一定要一一对应

前端 vue2+elementui

<el-form-item prop="cover_img">
          <img src="@/assets/images/cover.jpg" alt="" srcset="" ref="imgRef">
          <input type="file" name="cover_img" accept="image/gif,image/jpeg,image/jpg,image/png" style="display: none" ref="FileRef" @change="changeCoverFn">
          <el-button type="text" @click="selCoverFn">选择封面</el-button>
</el-form-item>

 这里采用的是点击事件先把选择封面的file隐藏起来 当点击触发点击事件

//让封面窗口出现的点击事件
    selCoverFn() {
      this.$refs.FileRef.click()
    },

这是最后的提交的点击事件 在提交之前要进行一个兜底校验，校验的注意ref 

pubArticleFn(str) {
      this.formDialog.status = str
      //  兜底校验
      this.$refs.DialogRef.validate(async valid => {
        if (valid) {
          const fd = new FormData()
          fd.append('title', this.formDialog.title)
          fd.append('cate_id', this.formDialog.id)
          fd.append('content', this.formDialog.content)
          fd.append('state', this.formDialog.status)
          fd.append('cover_img', this.formDialog.cover_img)
          const {data:res} = await addloadArticleAPI(fd)
          // console.log( addloadArticleAPI(fd))
          if (res.status != 0) return this.$message.error('发布文章失败')
          this.$message.success('发布文章成功')
          //  关闭弹窗
          this.dialogVisible = false
        //  刷新文章列表，再次请求文章列表数据
          this.getArticleListFn()
        } else {
          return false
        }
      })
    },

这里FormData将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率

• FormData.append()
  向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

 接口

export const addloadArticleAPI=(fd)=>{
  return request({
    url:'my/article/add',
    method:'POST',
    data:fd
  })
}

这里fd不是对象 不能用{}