vue2+element-ui+nodejs实现图片上传和修改图片到数据库的方法

const express = require('express')
const app = express()
const cors = require('cors')
const port = 3001
app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
/* 使用图片路由 */
const imgRouter = require("../router/images.js");
app.use("/api", imgRouter);

const express = require("express");
const router = express.Router();
// 引入multer
const multer = require("multer")
const fs=require("fs")
//导入数据库
const db = require("../database/index");
//图片上传
router.post(
    "/imgload",
    multer({
      //设置文件存储路径
      dest: "public/images",
    }).array("file", 1),
    function (req, res, next) {
      console.log(req.body,"req.bodyreq.bodyreq.bodyreq.body");
      let files = req.files;
      let file = files[0];
      let fileInfo = {};
      file.originalname = Buffer.from(file.originalname, "latin1").toString(
        "utf8"
      );
      let path = "public/images/" + Date.now().toString() + file.originalname;
      fs.renameSync("./public/images/" + file.filename, path);
      console.log(path);
      
      db.query()

      //获取文件基本信息
      fileInfo.type = file.mimetype;
      fileInfo.name = file.originalname;
      fileInfo.size = file.size;
      fileInfo.path = path;
      res.send({
        code: 200,
        msg: "OK",
        data: fileInfo,
      });
    }
)


module.exports = router;

 <template>
    <div>
    <el-upload
            class="upload-demo"
            ref="upload"
            action='http://localhost:3001/api/imgload'
            :data="form"
            :on-preview="handlePreview"
            :auto-upload="false"
            :on-success="handleUploadSuccess"
           
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
    </el-upload>
    <el-button type="primary" @click="submit">确 定</el-button>

    </div>
</template>
export default{
methods:{
    submit(){
 this.$refs.upload.submit();
}
}
    
}

const mysql = require("mysql");
const db = mysql.createPool({
    host: "xxxx",
    user: "xxx",
    password: "xxx",
    database: "app",
    multipleStatements: true
})

module.exports = db;

const express = require("express");
const router = express.Router();
// 引入multer
const multer = require("multer")
const fs=require("fs")
//导入数据库
const db = require("../database/index");
//图片上传
router.post(
    "/imgload",
    multer({
      //设置文件存储路径
      dest: "public/images",
    }).array("file", 1),
    function (req, res, next) {
      console.log(req.body,"req.bodyreq.bodyreq.bodyreq.body");
      let files = req.files;
      let file = files[0];
      let fileInfo = {};
      file.originalname = Buffer.from(file.originalname, "latin1").toString(
        "utf8"
      );
      let path = "public/images/" + Date.now().toString() + file.originalname;
      fs.renameSync("./public/images/" + file.filename, path);
      console.log(path);
      let sql=`insert into images (imagesname) VALUES ('${path}');`
      db.query(sql)

      //获取文件基本信息
      fileInfo.type = file.mimetype;
      fileInfo.name = file.originalname;
      fileInfo.size = file.size;
      fileInfo.path = path;
      res.send({
        code: 200,
        msg: "OK",
        data: fileInfo,
      });
    }
)

module.exports = router;

app.use("/api/images", express.static("./public/images"));
app.get("/api/images/:filename", (req, res) => {
  const filename = req.params.filename;
  const imagePath = path.join(__dirname, "public/images", filename);

  fs.access(imagePath, fs.constants.F_OK, (error) => {
    if (error) {
      // 图片不存在，返回404状态码
      res.status(404).send("图片不存在");
    } else {
      // 图片存在
      res.status(200).send("图片存在");
    }
  });
});