如何将图像上传到Firebase Storage for Editor.js？

问题描述

我正在尝试通过使用后端文件上传器端点在Editor.js中添加图像上传功能。在后端，我将此文件上传到Firebase存储。但是实际上我能够提取文件。我尝试了很多方法，但是没有用

是否还有其他方法可以向editor.js添加图片上传功能。

解决方法

实际上，我找到了另一种方法。 Editor.js提供了一种可以在客户端添加UploadByFile方法的方法。 Firebase存储在客户端可以正常工作。这是代码

config: {
    uploader: {
        async uploadByFile(file) {
            var storageRef = storage.ref();
            var imagesRef = storageRef.child('EditorJS').child('images/'+ file.name);
            var metadata = {
                contentType: 'image/jpeg'
            };
            var uploadTask = await imagesRef.put(file,metadata);
            console.log("Uploaded successfully!",uploadTask);
            const downloadURL = await uploadTask.ref.getDownloadURL();
            console.log(downloadURL);
            return {
                success: 1,file: {
                    url: downloadURL
                }
            }
        }
    }
}

将此配置添加到editor.js实现中的图像对象。

我也正在使用editorjs，谢谢您的回答。这是我针对该问题的解决方案：

uploadByFile(file : File) {
            const path = `post/${Date.now()}_${file.name}`;
            const ref = that.afStorage.ref(path);
            const task = that.afStorage.upload(path,file);
            return new Promise((resolve,reject) => {
              task.snapshotChanges()
                .pipe(
                  finalize( () => {
                    ref.getDownloadURL()
                      .subscribe(url => {
                        console.log(url);
                        let res = {
                          success: 1,file: {
                            url : url
                          }
                        }
                        resolve(res);
                      },error => {
                        console.log(error);
                        reject(error);
                      })
                  }))
                .subscribe( url => {
                  if(url){
                    console.log(url);
                  }
                })
            })
          }

这正是我解决这个问题所需要的，所以谢谢 Sachin Kumar。这是一个完整的工作示例，但请注意，您需要在 image.css 文件中填写 Firebase 设置，否则您将无法连接到 Firebase 存储。我没有以保存内容为例，因为我不想太长，但这应该会让你开始。

我正在测试嵌入，因此我包含了嵌入代码，它允许您复制 youtube 视频 URL 并通过仅包含嵌入 js 和配置来嵌入 youtube 视频。再次没有保存但非常简单。

test.html：

 <!DOCTYPE html>
<html  >
    <head>
        <!-- Add editorJS via CDN -->
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script> 
        
        <!-- Add Firebase via CDN-->
        <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script> 
        <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-firestore.js"></script> 
        <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-storage.js"></script> 
    </head>
    <body>
        <h4>EditorJs</h4>
        <div id="editorjs" style="background-color: grey;" ></div>
        <!-- Add the javascript for Image component and Firebase Storage -->
        <script src="image.js"></script> 
    </body>
</html>

这是 image.js 文件（记得更新 firebase 配置）：

    var firebaseConfig = {
/* Enter your firebase Config settings here or this wont work */
    apiKey: "",authDomain: "",databaseURL: "",projectId: "",storageBucket: "",messagingSenderId: "",appId: "",measurementId: ""
};

firebase.initializeApp(firebaseConfig);
const db=firebase.firestore();
const ImageTool = window.ImageTool;

const editor = new EditorJS({
    holder: 'editorjs',placeholder: 'Enter Card Content',tools: {
        header: {
            class: Header,inlineToolbar: ['link']
        },list: {
            class: List,inlineToolbar: ['link','bold']
        },embed: {
            class: Embed,inlineToolbar: false,config: {
                services: {
                    youtube: true,coub: true
                }
            },},image: {
            class: ImageTool,config: {
                    uploader: {
                        async uploadByFile(file) {
                            let storageRef = firebase.storage().ref();
                            let imagesRef = storageRef.child('EditorJS').child('images/'+ file.name);
                            let metadata = {
                                contentType: 'image/jpeg'
                            };
                            let uploadTask = await imagesRef.put(file,metadata);
                            const downloadURL = await uploadTask.ref.getDownloadURL();
                            return {
                                success: 1,file: {
                                    url: downloadURL
                            }
                        }
                    }
                }
            }               
        }
    }
});

buffer buffer editorjs firebase-storage javascript