Javascript 使用React将文件上载到Firebase

我正在尝试将文件上载到Firebase，如下所示：

uploadImage(file) {
    // Create the file metadata
    var metadata = {
        contentType: 'image/jpeg'
    };
    console.log(1);
    try {
        var uploadTask = firebase.storage().ref().child('images/' + file.name).put(file, metadata);
    } catch (e) {
        console.log('tutej', e)
    }
    // Upload file and metadata to the object 'images/mountains.jpg'
    console.log(2);
    // Listen for state changes, errors, and completion of the upload.
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
        function (snapshot) {
            console.log(3);
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
            switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED: // or 'paused'
                    console.log('Upload is paused');
                    break;
                case firebase.storage.TaskState.RUNNING: // or 'running'
                    console.log('Upload is running');
                    break;
                default:
                    console.log('test1');
                    break;
            }
        }, function (error) {
            console.log(4);
            // A full list of error codes is available at
            // https://firebase.google.com/docs/storage/web/handle-errors
            switch (error.code) {
                case 'storage/unauthorized':
                    // User doesn't have permission to access the object
                    break;

                case 'storage/canceled':
                    // User canceled the upload
                    break;

                case 'storage/unknown':
                    // Unknown error occurred, inspect error.serverResponse
                    break;

                default:
                    console.log('test2');
                    break;
            }
        }, function () {
            console.log(4);
            // Upload completed successfully, now we can get the download URL
            uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
                console.log('File available at', downloadURL);
            });
        });
}

HTML:

工作原理：我希望将带有HTML

元素上传的文件作为图片上传到Firebase。到目前为止，当我尝试这样做时，我得到了以下结论：

error = {
    code_: "storage/invalid-argument",
    message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.",
    name_: "FirebaseError",
    serverResponse_: null ,
};

根据我的研究，我需要把它变成一个

Blob

。但是为什么呢？

字段的值不是文件吗？它看起来像文件的路径。（示例：

C:\fakepath\8a25f4e0b058f2ce8480ef3741823762.png

）

那么区别是什么？我如何使它成为一个文件

---

简言之？我必须做些什么才能真正上传它，为什么使用

还不够？

好的，我建议阅读。

uploadFile（）

方法工作得非常好。

您提到的教程没有介绍firebase。我建议将图像转换为数据URI，并将其作为字符串上载。为什么？何时可以上载到firebase存储？上载文件后，将其转换为URI字符串，并使用

firebase.database（）.path.to.image.set（yourURI字符串）

。如果我没记错的话

var fileAnswer = document.getElementById('fileAnswer').value;

if (fileAnswer.length > 0) {
    this.uploadImage(fileAnswer);
}

error = {
    code_: "storage/invalid-argument",
    message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.",
    name_: "FirebaseError",
    serverResponse_: null ,
};