摘要：在自己做一個(gè)簡單的后臺(tái)管理系統(tǒng)時(shí)，用的是作本地?cái)?shù)據(jù)庫，然后用了的組件來實(shí)現(xiàn)圖片的上傳，中間有遇到那么點(diǎn)小坑，這里記錄下，比較坑的一點(diǎn)就是，不知道文件的命名不能帶空格，然后改了好久文件這里的話，就是簡單點(diǎn)的使用圖形界面框架的上傳組件，然后

在自己做一個(gè)簡單的后臺(tái)管理系統(tǒng)時(shí)，用的是node作本地?cái)?shù)據(jù)庫，然后用了Element-ui的upload組件來實(shí)現(xiàn)圖片的上傳，中間有遇到那么點(diǎn)小坑，這里記錄下，比較坑的一點(diǎn)就是，不知道文件的命名不能帶空格，然后改了好久

這里的話，就是簡單點(diǎn)的使用圖形界面框架Element-ui的上傳組件，然后，action就是服務(wù)器端的地址，我這里使用了代理，將localhost:8080代理到你使用node作為服務(wù)器的地址就可以了

我這里使用的是vue-cli3腳手架來搭建的項(xiàng)目，所以，自己在項(xiàng)目的根目錄下創(chuàng)建一個(gè)vue.config.js來做一些配置

module.exports = {
  devServer: {
    port: 8080,
    headers: {
    },
    inline: true,
    overlay: true,
    stats: "errors-only",
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true // 是否跨域
      }
    }
  },
};

這里很重要的一點(diǎn)就是設(shè)置靜態(tài)資源目錄
app.use("/serverImage", express.static(path.join(__dirname, "serverImage")));

對(duì)圖片上傳進(jìn)行了方法的封裝

const fs = require("fs");
const path = require("path");
/* formidable用于解析表單數(shù)據(jù)，特別是文件上傳 */
const formidable = require("formidable");
/* 用于時(shí)間格式化 */
const formatTime = require("silly-datetime");

/* 圖片上傳 */
module.exports = (req, res) => {
  /* 創(chuàng)建上傳表單 */
  let form = new formidable.IncomingForm();
  /* 設(shè)置編碼格式 */
  form.encoding = "utf-8";
  /* 設(shè)置上傳目錄(這個(gè)目錄必須先創(chuàng)建好) */
  form.uploadDir = path.join(__dirname, "../serverImage");
  /* 保留文件后綴名 */
  form.keepExtensions = true;
  /* 設(shè)置文件大小 */
  form.maxFieldsSize = 2 * 1024 *1024;

  /* 格式化form數(shù)據(jù) */
  form.parse(req, (err, fields, files) => {
    let file = files.file;
    /* 如果出錯(cuò)，則攔截 */
    if(err) {
      return res.send({"status": 500, msg: "服務(wù)器內(nèi)部錯(cuò)誤", result: ""});
    }

    if(file.size > form.maxFieldsSize) {
      fs.unlink(file.path);
      return res.send({"status": -1, "msg": "圖片不能超過2M", result: ""});
    }

    /* 存儲(chǔ)后綴名 */
    let extName = "";

    switch (file.type) {
      case "image/png":
        extName = "png";
        break;
      case "image/x-png":
        extName = "png";
        break;
      case "image/jpg":
        extName = "jpg";
        break;
      case "image/jpeg":
        extName = "jpg";
        break;
    }
    if(extName.length == 0) {
      return res.send({"status": -1, "msg": "只支持jpg和png格式圖片", result: ""});
    }

    /* 拼接新的文件名 */
    let time = formatTime.format(new Date(), "YYYYMMDDHHmmss");
    let num = Math.floor(Math.random() * 8999 + 10000);
    let imageName = `${time}_${num}.${extName}`;
    let newPath = form.uploadDir + "/" + imageName;

    /* 更改名字和路徑 */
    fs.rename(file.path, newPath, (err) => {
      if(err) {
        return res.send({"status": -1, "msg": "圖片上傳失敗", result: ""});
      } else {
        return res.send({"status": 200, "msg": "圖片上傳成功", result: {url: `http://localhost:3000/serverImage/${imageName}`}});
      }
    })
  })
};

方法的調(diào)用

const express = require("express");
const router = express.Router();
const uploadImg = require("./uploadImg");

/* 上傳圖片 */
router.post("/upload", (req, res) => {
  uploadImg(req, res);
});

module.exports = router;

服務(wù)器端入口文件

const express = require("express");
const app = express();
const path = require("path");
/* body-parser是一個(gè)HTTP請求體解析的中間件
 * 使用這個(gè)模塊可以解析JSON、Raw、文本、URL-encoded格式的請求體
 * */
const bodyParser = require("body-parser");

const dataBaseOperate = require("./database/operate");

/* 以application/json格式解析數(shù)據(jù) */
app.use(bodyParser.json());
/* 以application/x-www-form-urlencoded格式解析數(shù)據(jù) */
app.use(bodyParser.urlencoded({ extended: false }));

/* 設(shè)置靜態(tài)資源目錄 */
app.use("/serverImage", express.static(path.join(__dirname, "serverImage")));

app.use("/api", dataBaseOperate);


app.listen(3000, () => {
  console.log("server is listening to http://localhost:3000")
});

對(duì)于接口文件的返回，這里使用了body-parser這個(gè)中間件來對(duì)node返回的body進(jìn)行json格式的解析

很重要的一點(diǎn)就是設(shè)置靜態(tài)資源目錄，不然的話就會(huì)報(bào)錯(cuò)，找不到文件或者文件夾

設(shè)置靜態(tài)資源目錄，用于存儲(chǔ)服務(wù)器端的靜態(tài)資源文件
app.use("/serverImage", express.static(path.join(__dirname, "serverImage")));

然后就是對(duì)文件的命名不能出現(xiàn)空格

文件的鏈接可以使用本地服務(wù)器端的url地址

正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

判斷ios和Android及PC端

webpack打包（有面試題）

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

實(shí)現(xiàn)單行及多行文字超出后加省略號(hào)