v-md-editor+nodejs 的图片上传功能

目录

一、v-md-editor的使用

二、前端上传数据

三、 Node.js后端代码

总结

---

一、v-md-editor的使用

(6条消息) Vue2使用vue-md-editor_Take-Your-Time的博客-CSDN博客

二、前端上传数据

这里没有构建 form 表单来上传文件，而是通过 FormData 对象 来模拟一个表单。然后借助 axios 向服务器的 http://localhost:3000/getImg 接口发送 post 请求，把构建的 formData 表单数据传送给服务器

handleUploadImage (event, insertImage, files) {
      event.preventDefault()
      let API_URL = 'http://localhost:3000'
      let file = files[0]
      let formData = new FormData()
      formData.append('avatar', file)

      console.log(files[0])
      request("/getimg", "post", formData).then((res) => {
        console.log(res)

        insertImage({
          url: `${API_URL}/avatars/${res.data.filename}`,
        })
      })
    }

三、 Node.js后端代码

(新建一个入口文件----可以不使用入口文件)在app.js文件下使用, 记得先安装 npm i multer

因为只是上传一张图片，所以用到了 multer 的 single 接口, 其参数 avatar 字符串对应客户端表单对象 formData 中包含的 avatar 字段，这两个值必须保持一致。当客户端请求 /upload 接口的时候，multer 会给 request 对象中添加一个 file 对象属性 

const express = require('express');
// 创建服务器实例对象
const app = express();
const bodyParser = require('body-parser');
const path = require('path');
const multer = require('multer');
const upload = multer({ dest: './public/avatars/' })
// 导入和配置cors跨域
const cors = require('cors');
app.use(cors());
// 配置解析表单数据的中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));



app.post('/getimg', upload.single('avatar'), (req, res) => {
  console.log(req);
  res.send(req.file);
});

 运行服务端  node app.js

在v-md-editor组件中点击上传图片即可  后端返回的数据

 

效果图 

四、扩展

1、使用multer 上传的图片文件名没有后缀​​​​​​​

解决：使用multer.diskStorage 来配置文件

var storage = multer.diskStorage({

  //设置上传后文件路径，uploads文件夹会自动创建。

  destination: function (req, file, cb) {

    cb(null, '你存储的图片路径');

  },

  //给上传文件重命名，获取添加后缀名

  filename: function (req, file, cb) {

    cb(null, file.fieldname + '-' + Date.now() + '.jpg');

    config.headfile = file.fieldname + '-' + Date.now() + '.jpg';

  },

});

var touxiang = multer({ storage: storage });

---

总结：

之前用的方法很繁琐，感觉这个方法挺合适的，官方文档的解释感觉有点少。