wangeditor富文本+v3+node上传图片

奔溃中

已于 2023-06-10 15:45:59 修改

阅读量1.9k

点赞数

文章标签： javascript 前端开发语言

于 2022-12-06 12:03:52 首次发布

本文链接：https://blog.csdn.net/h2035270689/article/details/128199875

版权

wangeditor这个是我见过最差的官方文档

直入主题

一:简单配置

wangeditor上传图片配置 copy过去就行了，ts编译不用管不影响js运行
代码写在 **setup（）{ }**中就行我为npm引入格式可能会有不同但大体配置一样

这里我用了ts  ：any可以取消 
  const editorConfig: any = {
   
            placeholder: '请输入内容...',
            MENU_CONF: {
   },
        }
        //上传图片配置
        editorConfig.MENU_CONF['uploadImage'] = {
   
            // 上传图片地址
            server: 'http://127.0.0.1:3100/uploadPicture/uploadPicture',
            fieldName: 'file',
            headers: {
   
                Authorization: sessionStorage.getItem('token') || ' ',
            },
            meta: {
   
                type: 'write',//这是我要传输的，不用可以删掉
            },
            metaWithUrl: true,
        }

server:(必填) 后端接口地址
headers: {
//这里我用了token身份验证传到node 根据自己需要可删除
Authorization: sessionStorage.getItem(‘token’) || ’ ',
},
metaWithUrl: true, 文档所给是将meta拼接到url中
后端获取格式一般为**？key=value**格式其余图片配置如图片大小图片格式等可参考文档直接copy就行怎么获取url 下面介绍。。

二：node接收

目录文件夹
在这里插入图片描述
db文件夹为自己的数据库简单封装
pubic\images\email 为所创建的路径
router_handle\uploadPicture…js 自己的路由接口

相关依赖
创建multerConfig.js文件写入

const multer = require('multer');
const md5 = require('md5');
const path = require('path') //
const fs = require('fs')

const resolve = (dir) => {
   
    return path.join(__dirname, './', dir)
}
//回调函数 若不用可删除 可写上自己所处理的逻辑 在这里拆分
const callback = () => {
   
    console.log("文件目录处理失败");
}
// 3. multer的配置对象
let storage = multer.diskStorage({
   
    // 3.1 存储路径
    destination: function (req