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