wangEditor5自定义上传图片返回空

因为上传图片接口返回结果与编辑器默认要求格式不一样，查看文档可用customInsert()方法处理

但是通过编辑器上传图片，已经成功将图片上传到服务器，并且有返回结果，返回结果示例：http://localhost:8081/file/8d9c76f6a0ad41bbb0f110def726b547.png（直接是图片地址的链接），但是这个链接我在customInsert的res变量中拿不到，以下是我的编辑器配置的代码，有没有踩过这坑的人，帮我看看问题在哪里？

// 编辑器的配置
const editorConfig = { 
  placeholder: '请 输 入 文 章 内 容 ...',
  autoFocus: true,
  MENU_CONF: {
    uploadImage: {
      // 服务端地址
      server: 'http://localhost:8081/file/upload',
      // 后端接受文件名
      fieldName: "file",
      // 图片最大体积(byte)
      maxFileSize: 1 * 1024 * 1024,
      // 文件类型
      allowedFileTypes: ['image/*'],
      // 超时时间(ms)
      timeout: 6 * 1000,
      // 加工上传接口返回数据
      customInsert(res, insertFn) {
        console.log('customInsert', res)
        insertFn(res, '图片消失了！', res)
      }
    }
  }
}

自己已经发现问题所在
作者描述wangEditor5 上传文件用了 https://uppy.io/docs/xhr-upload/ ，经我测试，目前只能接收 JSON 格式的数据，字符串接收不到。
返回接口直接返回url字符串，无法交给customInsert的res参数

参考GPT和自己的思路：根据你提供的代码和情况，问题可能出在customInsert()方法中的参数。根据文档，customInsert()方法的第一个参数是服务端返回的数据，如果服务端返回的是图片地址的链接，那么这个链接是应该在res.data中。所以，可能需要修改customInsert()方法中的insertFn()方法的第一个参数为res.data，即：

customInsert(res, insertFn) {
  console.log('customInsert', res);
  insertFn(res.data, '图片消失了！', res);
}

这样应该可以插入成功了。如果还是出现问题，请检查一下服务端返回的数据是否正确。

该回答引用于gpt与OKX安生共同编写：

• 该回答引用于gpt与OKX安生共同编写：

• 根据您提供的代码和描述，可能是因为customInsert()方法实现不正确导致的。首先，我们需要了解customInsert()方法的作用和参数。

customInsert()方法会在上传图片后，将服务器返回的数据进行加工处理，并将结果传递给insertFn()方法。其中，res参数是服务器返回的数据，insertFn()方法是一个回调函数，用于将加工处理后的数据插入到编辑器中。

• 根据您提供的返回结果示例，上传成功后服务器返回的应该是一个图片的URL链接地址。所以，在customInsert()方法中，我们只需要将res参数直接传递给insertFn()方法即可，不需要添加额外的参数。下面是修改后的代码：

const editorConfig = {
  placeholder: '请输入文章内容...',
  autoFocus: true,
  MENU_CONF: {
    uploadImage: {
      // 服务端地址
      server: 'http://localhost:8081/file/upload',
      // 后端接受文件名
      fieldName: "file",
      // 图片最大体积(byte)
      maxFileSize: 1 * 1024 * 1024,
      // 文件类型
      allowedFileTypes: ['image/*'],
      // 超时时间(ms)
      timeout: 6 * 1000,
      // 加工上传接口返回数据
      customInsert(res, insertFn) {
        console.log('customInsert', res);
        insertFn(res);
      }
    }
  }
}

可以看到，我们将insertFn(res, '图片消失了！', res)修改为insertFn(res)，这样就可以将图片URL链接插入到编辑器中了。

• 如有用的话，还请采纳哦~

如果是自定义上传，是需要使用customUpload方法，而customInsert方法是自定义插入，具体使用示例如下：

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      server: "http://192.168.25.183:4001/uploadImg",
      // timeout: 5 * 1000, // 5s
      // fieldName: "custom-fileName",
      // meta: { token: "xxx", a: 100 },
      // metaWithUrl: true, // 参数拼接到 url 上
      // headers: { Accept: "text/x-json" },

      maxFileSize: 10 * 1024 * 1024, // 10M
      base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
      onSuccess(file, res) {
        console.log(`${file.name} 上传成功`, res);
      },
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {
        console.log(`${file.name} 上传出错`, err, res);
      },
      //自定义插入
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
        let { url, alt, href } = res.data;
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(url, alt, href);
      },
      //自定义上传
      async customUpload(file, insertFn) {
        // file 即选中的文件
        console.log(file);
        let formData = new FormData();
        formData.append("files", file);
        // 自己实现上传，并得到图片 url alt href
        fetch('/api/uploadImg', {
          method: "POST",
          body: formData,
        })
          .then((res) => res.json())
          .then((res) => {
            let { url, alt, href } = res.data;
            // 最后插入图片
            insertFn(url, alt, href);
          });
      },
    },
  },
};

node端代码（使用express搭建）：

const express = require("express");
const app = express();
const multer = require("multer");
//引入 path 和 fs
const path = require("path");
const fs = require("fs");
// 设置保存上传文件路径
const upload = multer({
  dest: "./static",
});
const port = 4001;
// 处理上传文件
app.use(upload.any());
app.use(express.static("static"));
app.use(express.static("public"));
// app.use(express.static(path.join(__dirname,'json')))
app.use("/json", express.static(path.join(__dirname, "json")));
app.use(express.json()); // 添加json解析
app.use(express.urlencoded({ extended: true }));

app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "*");
  res.header("Access-Control-Allow-Headers", "*");
  next();
});

//单文件上传
app.post("/uploadImg", (req, res) => {
  console.log(req.files)
  var extname = path.extname(req.files[0].originalname);
  //拼接新的文件路径，文件加上后缀名
  var newPath = req.files[0].path + extname;
  fs.rename(req.files[0].path, newPath, function (err) {
    if (err) {
      res.send({ errno: 1, message: "图片上传失败" });
    } else {
      res.send({
        errno: 0, // 注意：值是数字，不能是字符串
        data: {
          url: `http://192.168.25.183:${port}/${req.files[0].filename}${extname}`, // 图片 src ，必须
          alt: req.files[0].originalname, // 图片描述文字，非必须
          href: "https://www.baidu.com", // 图片的链接，非必须
        },
      });
    }
  });
});
app.listen(port, (err) => {
  console.log("服务器启动成功   http://192.168.25.183:4001");
});