React Redux Firebase 上传文件对象答案

【问题标题】：React Redux Firebase Upload File ObjectReact Redux Firebase 上传文件对象
【发布时间】：2017-07-29 18:16:41
【问题描述】：

试图将文件对象传递给 redux 操作并在 redux 操作中执行功能，不确定其正确方式？但基本上我想从 firebase 上传完成下载 URL，这样我就可以显示图像前端了。

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
            }));

        });
    }
}

错误：

【问题讨论】：

标签： reactjs firebase redux firebase-storage

【解决方案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);
  }
);

【讨论】：