适用于 Firebase 的 Ckeditor 自定义文件上传适配器不起作用

Question

我正在做一个需要在Firebase存储上存储图像的项目。我使用 Ckeditor 上传图像，我按照 Ckeditor 的文档编写我自己的图像上传适配器，但它不是不起作用。我无法将图片上传到火力基地并取回图片网址。这是我尝试过的

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}

/>

有将图片从 Ckeditor 上传到 firebase 存储的经验的人可以帮助我吗？谢谢你。

Answer 1

我也一直在尝试解决这个问题。现在，我已经能够通过将 CORS 添加到 FireBase 网址来将图像上传到我的服务器

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

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

_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 存储中。