如何将多个文件发送到Fire Base存储中并将其URL保存在实时数据库中的一条记录中

时间:2019-04-10 05:52:12

标签: javascript firebase-realtime-database firebase-storage

我想将多个文件发送到Fire-base存储,同时它必须使用Java脚本将实时数据库保存为一个记录 例如: file1:urlonfirstfile file2:urlonsecondfile

            for (var i = 0; i < file.length; i++) {

                var task = ref.child(file.name).put(file, metadata);
                task
                    .then(snapshot => snapshot.ref.getDownloadURL())
                    .then((url) => {
                        console.log(url);
                        userDetails.push({

                            email : email,
                            title1: tit,
                            detail1: dit,
                            file:file[i].name

                        });

                    });
            }

1 个答案:

答案 0 :(得分:0)

关于要存储的信息,您的问题有点含糊。因此,我做出了一些假设以提出以下代码:

  • 文件应上传到Firebase Storage特定于登录用户的区域。 (例如“ userFiles / CURRENT_USER /...”)
  • 有关上传文件的信息保存在用户自己的数据下。 (例如“ users / CURRENT_USER / uploads /...”
  • 每个文件的titledetail属性都会更改。这些属性的来源尚不清楚,所以我只是假设它们是通过对象metadata传递的。

下面的代码应该足以让您开始研究自己的解决方案。

// the array of File objects to upload
const fileObjArray = [ ... ]

// the metadata to store with each file
const metadata = { ... }

// the current user's ID
const currentUserId = firebase.auth().currentUser.uid;

// Where to save information about the uploads
const databaseRef = firebase.database().ref("user").child(currentUserId).child('uploads');

// Create an ID for this set of uploaded files
const uploadId = storageRef.push().key;

// Save files to storage in a subfolder of the user's files corresponding to the uploadId
const storageRef = firebase.storage().ref("userFiles").child(currentUserId).child(uploadId);

// Upload each file in fileObjArray, then fetch their download URLs and then return an object containing information about the uploaded file
var uploadPromiseArray = fileObjArray.map((fileObj) => {
    var uploadTask = storageRef.child(fileObj.name).put(fileObj, metadata)

    return uploadTask.then(uploadSnapshot => {
            // file uploaded successfully. Fetch url for the file and return it along with the UploadTaskSnapshot
            return uploadSnapshot.ref.getDownloadURL().then((url) => {
                    return {
                        downloadUrl: url,
                        snapshot: uploadSnapshot
                    };
                });
        });
});

// uploadPromiseArray is an array of Promises that resolve as objects with the properties "downloadUrl" and "snapshot"
Promise.all(uploadPromiseArray)
    .then((uploadResultArray) => {
        var batchUploadData = {
            timestamp: firebase.database.ServerValue.TIMESTAMP, // use the server's time
            files: [],
            ... // other upload metadata such as reason, expiry, permissions, etc.
        }

        batchUploadData.files = uploadResultArray.map((uploadResult) => {
            // rearrange the file's snapshot data and downloadUrl for storing in the database
            return {
                file: uploadResult.snapshot.name,
                url: uploadResult.url,
                title: uploadResult.snapshot.metadata.customMetadata.title,
                detail: uploadResult.snapshot.metadata.customMetadata.detail
            };
        });

        // commit the data about this upload to the database.
        return databaseRef.child(uploadId).set(batchUploadData);
    })
    .then((dataSnapshot) => {
        // the upload completed and information about the upload was saved to the database successfully

        // TODO: do something
    }, (err) => {
        // some error occured
        // - a file upload failed/was cancelled
        // - the database write failed
        // - permission error from Storage or Realtime Database

        // TODO: handle error
    });

// Warning: this line will be reached before the above code has finished executing

这是在数据库上的样子:

"users": {
    "someUserId-78sda9823": {
        "email": "example@example.com",
        "name": "mr-example",
        "username": "mrexemplary",
        "uploads": {
            "niase89f73oui2kqwnas98azsa": {
                "timestamp": 1554890267823,
                "files": {
                    "1": {
                        "file": "somefile.pdf",
                        "url": "https://firebasestorage.googleapis.com/v0/b/bucket/o/userFiles%2FsomeUserId-78sda9823%2Fsomefile.pdf",
                        "title": "Some File",
                        "detail": "Contains a report about some stuff"
                    },
                    "2": {
                        "file": "screenshot.png",
                        "url": "https://firebasestorage.googleapis.com/v0/b/bucket/o/userFiles%2FsomeUserId-78sda9823%2Fscreenshot.png",
                        "title": "Screenshot of problem",
                        "detail": "Contains an image that shows some stuff"
                    },
                    ...
                }
            },
            ...
        },
        ...
    },
    ...
}

注释1 :该代码尚未完成。它缺少诸如权限错误和文件上传不完整之类的错误处理。这是您要解决的问题。

注意2 :对于不完整的文件上传,如果任何文件上传失败或无法成功获取其下载URL,则不会写入数据库。一种帮助解决此问题的方法是在错误中返回catch的{​​{1}}上添加uploadTask,然后在null步骤中跳过所有uploadResultArray.map(...)变量为null或写入该特定文件失败的数据库。

注释3 :由于Firebase存储和实时数据库都使用快照,因此在同时使用快照时,请尝试分别将它们分别命名为uploadResult / uploadSnapshotfileSnapshot在您的代码中最大程度地减少混乱。同样,将您的引用命名为dataSnapshot / somethingStorageRefsomethingSRef / somethingDatabaseRef