nodejs 實現文件上傳

需求：在作nodejs + express + vue博客項目時須要實現圖片上傳到後臺和刪除的功能，這裏作一個記錄。

• nodejs 實現圖片上傳

// 導入express框架
const express = require('express')

const multer=require('multer');

const path=require('path');
const fs=require('fs');
// 建立路由
const upload = express.Router()

var Multer=multer({dest: './public/uploads'}); //設置上傳的的圖片保存目錄
// 表示接收任何上傳的數據 對應的有個 upload.single('user') 表示只接收name爲user的上傳數據
upload.use(Multer.any());

upload.post('/images',(req,res)=> {
  // 帶後綴的路徑
  const newpath = req.files[0].path + path.parse(req.files[0].originalname).ext
  // 帶後綴的文件名
  const newname = req.files[0].filename +  path.parse(req.files[0].originalname).ext
  // 重命名文件名
  fs.rename(req.files[0].path,newpath,err=>{
    if(err) return res.send({
      "data": null,
      "meta": {
          "msg": "文件上傳失敗！",
          "status": 400
      }
    })
  })
  res.send({
    "data": newname,
    "meta": {
        "msg": "文件上傳成功！",
        "status": 201
    }
  })
})

// 將路由對象做爲模塊成員進行導出
module.exports = upload

• nodejs 實現圖片刪除

// 導入express框架
const express = require('express')

const path=require('path');
const fs=require('fs');

// 建立路由
const deleteImg = express.Router()

deleteImg.delete('/deleteImg/:name',(req,res)=> {
  // 刪除圖片
  const name = req.params.name
  fs.unlink('./public/uploads/' + req.params.name, err=> {
    if(err) return res.send({
      "data": null,
          "meta": {
              "msg": "刪除失敗",
              "status": 400
          }
    })
  })
  res.send({
    "data": null,
        "meta": {
            "msg": "刪除成功",
            "status": 200
        }
  })
})

module.exports = deleteImg

• vue 實現圖片上傳

<template>
<!-- 圖片上傳 -->
  <el-upload
    class="avatar-uploader"
    action="http://127.0.0.1:8889/images"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data () {
    return {
      // 提交文章數據
      article: {
        title: '',
        author: '',
        cover: '',
        content: '',
        sort: ''
      },
      imageUrl: ''
    }
  },
  methods: {
    // 選擇文章封面
    async handleAvatarSuccess (res, file) {
      // 刪除以前的圖片
      await this.$http.delete(`/deleteImg/${this.article.cover}`)
      // 獲取圖片文件名
      this.article.cover = res.data
    },
    // 上傳圖片以前
    beforeAvatarUpload (file) {
      // 圖片預覽
      this.imageUrl = URL.createObjectURL(file)
    }
  }
}
</script>