wangEditor+vue+node.js 文件上传完整版

<template>
  <div style="border: 1px solid #ccc; margin: 60px 0 0 0; height: 100vh">
    <el-button type="primary" @click="release">发布</el-button>
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 100vh; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IEditorConfig } from "@wangeditor/editor";
import { IButtonMenu, IDomEditor } from "@wangeditor/editor";

export default {
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["group-video", "fullScreen", "emotion"],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            server:'http://127.0.0.1:8888/article/uploadArticleImg',
            onSuccess(file, res) { 
                console.log(`${file.name} 上传成功`, res)
            },
          },
        },
      },
      mode: "default", // or 'simple'
    };
  },
  created() {},
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    release() {
      console.log("html");
      let html = this.editor.getHtml();
      console.log(html);
    },
  },
  mounted() {
    console.log(this.$API);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
</style>

前端代码没有什么要注意的 就完整贴出来

const express = require('express')
const app = express()

let bodyParser = require('body-parser');
const multer = require('multer')
const qiniu = require('qiniu')
const upload = multer()
let jsonParser = bodyParser.json()
app.use(express.static('public'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(multer({ dest: '/tmp/' }).single('wangeditor-uploaded-image'))

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.header("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
    next();
});

let config = new qiniu.conf.Config()
config.zone = qiniu.zone.Zone_z2

const accessKey = ""
const secretKey = ""
const mac = new qiniu.auth.digest.Mac(accessKey,secretKey)
//要上传的空间
const bucket = "hprblog"
let options = {
    scope: bucket
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)
let formUploader = new qiniu.form_up.FormUploader(config)
let putExtra = new qiniu.form_up.PutExtra()

//文件信息
const bucketManger = new qiniu.rs.BucketManager(mac,config)
//上传到七牛后保存的文件名
let key = ''
//要上传文件的本地路径
filePath = ''
const publicBucketDomain = '';
const deadline = parseInt(Date.now() / 1000) + 3600; 

app.post('/uploadArticleImg', (req, res) => {
    key = req.file.originalname
    filePath = req.file.path
    formUploader.putFile(uploadToken, key, filePath, putExtra, (respErr,
        respBody, respInfo) => {
        if (respErr) {
            throw respErr;
        }
        if (respInfo.statusCode == 200) {
            console.log(respBody);
            const pulicDowUrl = bucketManger.privateDownloadUrl(publicBucketDomain,respBody.key,deadline)
            console.log(pulicDowUrl);
            res.json({
                'errno':0,
                'data':{
                    'url':`${pulicDowUrl}`
                }
            })
        } else {
            console.log(respInfo.statusCode);
            console.log(respBody);
        }
    })

})

module.exports = app

后端需要注意的是自己的秘钥accessKey secretKey
publicBucketDomain 写自己域名的时候注意要加上http:// 或 https:// 不然前端返回会自己加上本地地址 线上可以不加 开发时如果是跨域请求一定要加