使用node实现保存图片的功能

前端部分

<template>
  <div class="main">
    <el-upload
      class="avatar-uploader"
      action="http://localhost:8888/uploadImg"
      :show-file-list="false"
      :http-request="upload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ""
    };
  },
  methods: {
    upload(f) {
      console.log(f);
      let formData = new FormData();
      formData.append("file", f.file);

      this.$axios({
        method: "post",
        url: "http://localhost:8888/uploadImg",
        data: formData
      }).then(res => {
        //上传成功之后 显示图片
        this.imageUrl = res.data.fileSqlUrl ;
      });
    }
  }
};
</script>

<style></style>

node

const express = require("express");
const bodyParser = require("body-parser");
const app = express(); //返回一个服务
var mysql = require("mysql");
const path = require("path");
const path = require("path");
const multer = require("multer"); 
 // 以上需要 npm install 下载一下
var connection = mysql.createConnection({
  host: "120.77.****",
  user: "sqlroot",
  password: "*******",
  port: 3306,
  database: "sqlroot",
  useConnectionPooling: true,
}); 
connection.connect(function (err) {
  if (err) {
    console.log("error");
  }
  console.log("connect success!");
});
// 建立数据库连接
var fileSqlUrl = "http://localhost:8888/upLoad/";
var fileSqlName;
var storage = multer.diskStorage({
  //设置 上传图片服务器位置
  destination: path.resolve(__dirname, "./upload"),
  //设置 上传文件保存的文件名
  filename: function (req, file, cb) {
    // 获取后缀扩展
    let extName = file.originalname.slice(file.originalname.lastIndexOf(".")); //.jpg
    // 获取名称
    let fileName = Date.now();
    fileSqlName = fileName + extName;
    fileSqlUrl += fileSqlName;
    // console.log(fileName + extName); //12423543465.jpg
    cb(null, fileName + extName);
  },
});
var fileFilter = function (req, file, cb) {
  var acceptableMime = ["image/jpeg", "image/png", "image/jpg", "image/gif"];
  // 限制类型
  // null是固定写法
  if (acceptableMime.indexOf(file.mimetype) !== -1) {
    cb(null, true); // 通过上传
  } else {
    cb(null, false); // 禁止上传
  }
};
var limits = {
  fileSize: "10MB", //设置限制（可选）
};

const imageUploader = multer({
  fileFilter,
  storage,
  limits,
}).single("file"); //文件上传预定 name 或者 字段

// 图片
app.post("/uploadImg", imageUploader, (req, res) => {
  console.log(imageUploader);
  connection.query(
    `insert into img values(0,'${fileSqlUrl}','${fileSqlName}')`,
    (err, data) => {
      if (err) {
        res.send({ err: 1, msg: "增加数据失败", success: false });
        res.end();
      } else {
        res.send({ err: 0, msg: "添加成功", success: true, fileSqlUrl });
        res.end();
      }
    }
  );
});
app.use(express.static(__dirname + "/public"));

app.listen(8888, () => {
  console.log("服务已经启动");
});