CKEditor5图片上传地址错误，商品描述中图片无法显示求助

我用CKEditor5编写商品描述，图片已成功保存到服务器指定路径，但无法在编辑器中正常显示，因为返回的图片地址是服务器本地路径而非可访问的URL。

客户端代码 #

class MyUploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }
    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this._initRequest();
                this._initListeners(resolve, reject, file);
                this._sendRequest(file);
            }));
    }
    abort() {
        if (this.xhr) {
            this.xhr.abort();
        }
    }
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', '/Products/UploadFileDescription', true);
        xhr.responseType = 'json';
    }
    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${file.name}.`;
        xhr.addEventListener('error', () => reject(genericErrorText));
        xhr.addEventListener('abort', () => reject());
        xhr.addEventListener('load', () => {
            const response = xhr.response;
            if (!response || response.error) {
                return reject(response && response.error ? response.error.message : genericErrorText);
            }
            resolve({
                default: response.Result
            });
        });
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', evt => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }
    _sendRequest(file) {
        const data = new FormData();
        data.append('file', file);
        this.xhr.send(data);
    }
}
function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader);
    };
}
ClassicEditor
    .create(document.querySelector('#editor'), {
        extraPlugins: [MyCustomUploadAdapterPlugin],
    })
    .then(editor => {
        window.editor = editor;
    })
    .catch(error => {
        console.error(error);
    });

服务端代码 #

[HttpPost]
[Route("/Products/UploadFileDescription")]
public IActionResult UploadFileDescription(IFormFile file)
{
    if (file != null)
    {
        if (file.Length > 0)
        {
            var fileName = NameGenerator.GenerateUniqCode() + Path.GetExtension(file.FileName);
            string filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/products/descriptionFiles", fileName);
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                file.CopyTo(stream);
                return Json(new { url = filePath });
            }
        }
    }
    return new JsonResult("Error");
}

问题原因 #

1. 服务端返回错误路径：当前服务端返回的filePath是服务器本地物理路径（如C:\Projects\YourApp\wwwroot\products\descriptionFiles\abc123.jpg），浏览器无法直接访问本地文件系统路径。
2. 客户端字段不匹配：客户端代码尝试读取response.Result，但服务端返回的字段是url，导致客户端无法获取正确地址。

解决方案 #

1. 修改服务端代码，返回可访问的URL #

将本地路径替换为网站根目录的相对URL，确保浏览器能正常访问：

[HttpPost]
[Route("/Products/UploadFileDescription")]
public IActionResult UploadFileDescription(IFormFile file)
{
    if (file != null && file.Length > 0)
    {
        var fileName = NameGenerator.GenerateUniqCode() + Path.GetExtension(file.FileName);
        // 本地存储路径
        string filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/products/descriptionFiles", fileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            file.CopyTo(stream);
        }
        // 返回可访问的相对URL
        string imageUrl = $"/products/descriptionFiles/{fileName}";
        // 字段名与客户端保持一致，返回Result
        return Json(new { Result = imageUrl });
    }
    return Json(new { Error = "上传失败" });
}

2. 确保客户端与服务端字段匹配 #

如果服务端保持返回url字段，需修改客户端的resolve逻辑：

resolve({
    default: response.url
});

额外注意事项 #

• 确保wwwroot/products/descriptionFiles目录有正确读写权限，服务器进程能写入文件。
• 部署时确认静态文件目录（wwwroot）已配置允许外部访问。

内容的提问来源于stack exchange，提问作者Hadi