koa2框架下的node图片上传接口配置（附前端vue中mavon-editor配置代码）

使用koa-multer编写图片上传接口

服务器源码：

const Router = require('koa-router');
const fs = require('fs')
const path = require('path')
const multer = require('koa-multer')
const router = new Router({
  prefix: '/file'
});

//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
  //确定图片存储的位置
  destination: function (req, file, cb){
    // 每一天的图片分开管理，每一天是一个文件夹
    let date = new Date();
    // 年
    let year = date.getFullYear();
    // 月
    let month = date.getMonth() + 1;
    // 日
    let day = date.getDate();
    // 创建文件夹路径
    let dir = "./public/uploads" + year + month + day;
    // 判断目录是否存在，不存在则自动创建目录
    if (!fs.existsSync(dir)){
      fs.mkdirSync(dir, {
        recursive: true
      })
    }
    // 上传文件
    cb(null, dir)
  },
  filename: function (req, file, cb){
    // 设置上传文件的名称
    let fileName = Date.now() + path.extname(file.originalname)
    // 设置名称
    cb(null, fileName)
  }
});
var upload = multer({storage: storage});

// 上传图片的接口 这里看自己的需求！！
router.post('/imgsUpload', upload.single('photoImg'), async (ctx)=> {
  // 返回给富本编辑器用于替换本地图片为服务器图片
  // 每一天的图片分开管理，每一天是一个文件夹
  let date = new Date();
  // 年
  let year = date.getFullYear();
  // 月
  let month = date.getMonth() + 1;
  // 日
  let day = date.getDate();
  // 创建文件夹路径
  let dir = "/uploads" + year + month + day + '/';
  let url = dir + ctx.req.file.filename;
  ctx.body = {
    code: 200,
    url: url
  }
})
// 抛出模块
module.exports = router;

vue前端代码

这里只列出了关于mavon-editor官网图片上传的代码

<template>
  <mavon-editor
    ref="md"
    style="min-height: 600px"
    :ishljs="true"
    v-model="value"
    @imgAdd="$imgAdd"
    @imgDel="$imgDel"
  />
template>

<script>
export default {
  data() {
    return {
      img_file: []
    };
  },
  methods: {
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("photoImg", $file);
      this.img_file[pos] = $file;
      this.$axios({
        url: 'http://localhost:3000/file/imgsUpload',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        data:formdata
      })
      .then((res) => {
        console.log(res)
        let _res = res.data;
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        this.$refs.md.$img2Url(pos, 'http://localhost:3000'+_res.url);
      }).catch(err => {
        console.log(err)
      })
    },
    $imgDel(pos) {
      // delete this.img_file[pos];
    },
  },
}
script>

<style>

style>