Reactjs Firebase的Ckeditor自定义文件上载适配器不工作

我正在从事一个需要在Firebase存储上存储图像的项目。我使用Ckeditor上传图像，我按照Ckeditor的文档编写自己的图像上传适配器，但它不起作用。我无法将图像上载到firebase并获取图像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', 'https://firebasestorage.googleapis.com/v0/b/smart-farming-e3e2d.appspot.com/o/images/', true);
        xhr.responseType = 'json';
    }

    // Initializes XMLHttpRequest listeners.
    _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.url
            });
        });

        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('upload', file);
        this.xhr.send(data);
    }
}

function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader);
    };
}

const editorConfiguration = {
    extraPlugins: [MyCustomUploadAdapterPlugin],
};

我把它称为在我的组件中使用，就像这样

<CKEditor
editor={ClassicEditor}
// data="<p>Hello from CKEditor 5!</p>"
onInit={editor => {
    // console.log('Editor is ready to use!', editor);
}}
onChange={(event, editor) => {
    const data = editor.getData();
    console.log({ event, editor, data });
}}
config={editorConfiguration}

{
//log（'Editor已准备好使用！'，Editor）；
}}
onChange={（事件，编辑器）=>{
const data=editor.getData（）；
log（{event，editor，data}）；
}}
配置={editorConfiguration}

/>

---

任何人都有从Ckeditor上传图像到firebase存储的经验吗？请帮助我？谢谢你。

我也一直在努力解决这个问题。我现在可以通过向FireBase URL添加COR将图像上传到我的服务器

xhr.open('POST', `https://cors-anywhere.herokuapp.com/https://firebasestorage.googleapis.com/v0/b/smart-farming-e3e2d.appspot.com/o/${file.name}`, true);

如果您想知道我是如何获得文件属性的，您需要在函数中传递它

_initRequest(file) {
                console.log(file.name)
                const xhr = this.xhr = new XMLHttpRequest();

                xhr.open('POST', `https://cors-anywhere.herokuapp.com/FIREBASE_URL_HERE{file.name}`, true);

                xhr.responseType = 'json';
            }

---

现在应该可以将您的图像上传到Firebase存储中了

我也一直在尝试修复这个问题。我现在可以通过向FireBase URL添加COR将图像上传到我的服务器

xhr.open('POST', `https://cors-anywhere.herokuapp.com/https://firebasestorage.googleapis.com/v0/b/smart-farming-e3e2d.appspot.com/o/${file.name}`, true);

如果您想知道我是如何获得文件属性的，您需要在函数中传递它

_initRequest(file) {
                console.log(file.name)
                const xhr = this.xhr = new XMLHttpRequest();

                xhr.open('POST', `https://cors-anywhere.herokuapp.com/FIREBASE_URL_HERE{file.name}`, true);

                xhr.responseType = 'json';
            }

---

现在应该可以将您的图像上传到Firebase存储中了

但是，我现在一直在想如何更新我的状态。显示这些图像的内容…任何帮助都将非常感谢看起来都与Firebase的响应有关…？但是，我现在一直在想如何更新我的状态。显示这些图像的内容…任何帮助都将非常有用看来这和firebase的反应有关。。。？