node之本地服務器圖片上傳

時間 2019-11-05

標籤 node 本地服務器圖片上傳简体版

原文原文鏈接

在本身作一個簡單的後臺管理系統時，用的是node做本地數據庫，而後用了Element-ui的upload組件來實現圖片的上傳，中間有遇到那麼點小坑，這裏記錄下，比較坑的一點就是，不知道文件的命名不能帶空格，而後改了很久

1.index.vue文件

這裏的話，就是簡單點的使用圖形界面框架Element-ui的上傳組件，而後，action就是服務器端的地址，我這裏使用了代理，將localhost:8080代理到你使用node做爲服務器的地址就能夠了

<template>
    <div class="avatar">
      <img
        :src="avatar?avatar:defaultImg"
      />
    </div>
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080/api/upload"
      :show-file-list="false"
      :on-success="uploadImgSuccess"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
    </el-upload>
</template>
<script>
import defaultImg from '@/assets/img/avatar.png'
export default{
    data() {
        return {
            avatar: ''
        }
    },
    methods: {
        uploadImgSuccess(res) {
            this.avatar = res.result.url;
        }
    }
}
</script>

2.代理文件

我這裏使用的是vue-cli3腳手架來搭建的項目，因此，本身在項目的根目錄下建立一個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 // 是否跨域
      }
    }
  },
};

3.node服務器端文件

這裏很重要的一點就是設置靜態資源目錄
app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));

對圖片上傳進行了方法的封裝

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

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

  /* 格式化form數據 */
  form.parse(req, (err, fields, files) => {
    let file = files.file;
    /* 若是出錯，則攔截 */
    if(err) {
      return res.send({'status': 500, msg: '服務器內部錯誤', result: ''});
    }

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

    /* 存儲後綴名 */
    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}`}});
      }
    })
  })
};

方法的調用

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

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

module.exports = router;

服務器端入口文件

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

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

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

/* 設置靜態資源目錄 */
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')
});