<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>

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

app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));

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

/* 圖片上傳 */
module.exports = (req, res) => {
 /* 創(chuàng)建上傳表單 */
 let form = new formidable.IncomingForm();
 /* 設(shè)置編碼格式 */
 form.encoding = 'utf-8';
 /* 設(shè)置上傳目錄(這個目錄必須先創(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;
  /* 如果出錯，則攔截 */
  if(err) {
   return res.send({'status': 500, msg: '服務(wù)器內(nèi)部錯誤', 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格式解析數(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')
});

app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));