关于 Vditor 图片上传后不能显示

使用 vditor 上传图片,后端成功返回了结果,但是 URL 绑定后没法正常显示

image.png

前端的相关代码,不知道问题是不是出在了"successMap"那里,望大神们指导一下...

            upload: {
              accept: 'image/*,.mp3, .wav, .rar',
              token: userId,
              fieldName: 'files', // 上传字段名称
              url: app.fileServiceUrl + '/file/uploadToOSS',
              linkToImgUrl: app.fileServiceUrl + '/file/uploadToOSS',
              multiple: false,
              filename: function (name) {
                console.log("filename:" + name);
                return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
                  replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
                  replace('/\\s/g', '')
              },
              format: function (files, res) {
                // 观察一下返回的数据结构
                console.log("files: " + files);
                console.log("res: " + res);

                return JSON.stringify({
                  "msg": res.msg,
                  "code": res.status,
                  "data": {
                    "errFiles": [],
                    "succMap": {
                      "filename": res.data,
                    }
                  }
                });
              }
            },
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    166 引用 • 1031 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    2620 引用 • 14485 回帖 • 514 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • KaloSora
    支持者 订阅者 作者

    这个 URL 我测试过,本地可以直接打开,嵌入到 img 标签里可以使用

  • KaloSora
    支持者 订阅者 作者

    问题已解决啦

    问题出在 format,后段要返回一个 Map,指定图片 URL 和图片的名称

                  format: function (files, res) {
    
                    // 字符串转换为对象
                    const { status, data, msg } = JSON.parse(res);
    
                    if (status == 200) {
                      return JSON.stringify({
                        "msg": msg,
                        "code": status,
                        "data": {
                          "errFiles": [],
                          "succMap": {
                            [data.imageName]: data.imageURL,
                          }
                        }
                      });
                    } else {
                      alert("图片上传失败: " + msg);
                      return;
                    }
                  }