关于node.js: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>