Question

尝试将文件对象传递给redux操作并执行redux操作中的函数，不确定它的正确方法？但基本上我想要从firebase上传完成后面的downloadURL，所以我可以显示图像前端。

createLocation(event) {
    event.preventDefault();
    const fileObject = this.state.file;

    const test = {
        fileObject
    }

    this.props.uploadImage_func(test);
}

和动作功能：

export function uploadImage_func(fileObject) {
    return dispatch => {
        const fileName = 'myimage';
        const storageRef = firebase.storage().ref('test/' + fileName);
        const task = storageRef.put(fileObject);

        task.on('state_changed',
            function complete(snapshot) {
                const downloadURL = task.snapshot.downloadURL;
            },
        ).then(function () {

            dispatch(attemptLogin({
                ...downloadURL
            }));

        });
    }
}

错误：

Answer 1

正如您所看到的，您收到了错误Invalid argument in 'put' at index 0: Expected Blob or File。首先，您需要路径完全是文件或Blob。如果您在createLocation中做得对，并且获得了文件对象，则不需要将其包含在const test对象中。该操作会导致不必要的嵌套，因此只需要路径fileObject。和更多。当您订阅firebase UploadTask on事件时，您需要路径回调函数并以正确的顺序执行，因此请尝试使用next：

uploadTask.on('state_changed',
  (snapshot) => {
    // here you could log loading information in percents but uploading is not finished yes
    console.log((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
  },
  (error) => console.log(error),
  () => {
    // And after uploading is complete you could get your download url
    console.log('Call save img', uploadTask.snapshot.downloadURL);
  }
);

有关详细信息，请参阅documentation for Firebase Storage (Upload files)

React Redux Firebase上传文件对象

1 个答案: