javascript - 如何在wangeditor中插入需要请求头的图片？

Question

wangeditor插入图片时，拼接了下载接口。但是下载接口需要请求头，因此导致图片无法插入，请问有什么解决办法吗

                customInsert: (insertImg, result, editor) => {
                    insertImg(process.env.VUE_APP_BASE_API + '/file/dwn2?fileName=' + result[0])})

尝试过用下载到本地获取blob地址，但是仍然无法展示

Answer 1

这里文档翻一下看看，有相关配置的。

https://www.wangeditor.com/v4/pages/07-%E4%B8%8A%E4%BC%A0%E5%...

Answer 2

在 WangEditor 中，如果你需要在插入图片时通过自定义接口（且该接口需要特定的请求头）来加载图片，你需要进行额外的处理。以下是一个可能的解决方案，它涉及到使用 fetch API 或其他 HTTP 客户端（如 axios）来发送带有请求头的请求，并将返回的图片数据转换为 Blob 对象，再插入到 WangEditor 中。

这里是一个使用 fetch 和 Blob 的例子：

customInsert: (insertImgFn, result, editor) => {
    // 假设 result[0] 是你需要的文件名或其他参数
    const fileName = result[0];
    const apiUrl = process.env.VUE_APP_BASE_API + '/file/dwn2?fileName=' + fileName;

    // 使用 fetch 发送请求，并带上需要的请求头
    fetch(apiUrl, {
        method: 'GET', // 或者 'POST'，取决于你的API要求
        headers: {
            // 在这里添加你的请求头
            'Authorization': 'Bearer your_token', // 示例，根据你的API要求调整
            // ... 其他请求头
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Failed to fetch image');
        }
        return response.blob(); // 获取 Blob 对象
    })
    .then(blob => {
        // 创建一个 URL 对象，指向该 Blob 对象
        const objectUrl = URL.createObjectURL(blob);
        // 使用 WangEditor 的 insertImgFn 插入图片
        insertImgFn(objectUrl);
    })
    .catch(error => {
        // 处理错误
        console.error('Error fetching image:', error);
    });
}

注意，在上面的代码中，我使用了 fetch 的 blob() 方法来确保获取到的是 Blob 对象，然后使用 URL.createObjectURL() 方法来创建一个可以在 HTML 中直接使用的 URL。这个 URL 可以被 WangEditor 的 insertImgFn 函数用来插入图片。

另外，请确保你的服务器支持跨域资源共享（CORS），并且允许你的前端代码所在的域来访问图片资源。

如果你正在使用 axios 或其他 HTTP 客户端，你可以按照类似的方式发送带有请求头的请求，并处理返回的响应数据。只需要确保最终你能获取到一个 Blob 对象，并将其转换为可以在 WangEditor 中使用的 URL。