nodejs 实现文件上传

Posted 2021-09-13 Emrof

需求：在做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>