使用 react-dropzone-uploader 获取服务器响应答案

【问题标题】：getting server response with react-dropzone-uploader使用 react-dropzone-uploader 获取服务器响应
【发布时间】：2020-01-28 10:20:46
【问题描述】：

如何使用react-dropzone-uploader 获得服务器响应。我一直在使用它，我正在尝试找到一种在文件上传或失败后从 nodejs 后端接收响应到 react 前端的方法。

前端（反应）：

const getUploadParams = (file) => {

        return {url: uploadUrl, headers: {"Authorization": `Bearer ${token}`}}
    }

    const handleChangeStatus = ({ meta, remove }, status) => {
        if (status === 'done') {
            notify(`${meta.name} uploaded!`)
            remove()
        } else if (status === 'aborted') {
            notify_error(`${meta.name}, Upload failed...`)
        }
    }

后端上传到谷歌云存储，所以如果成功，我想向前端发送一个响应，以便能够通知用户他们的文件上传状态

后端（nodejs）：

bucket.upload(file.path, {
                                public: true,
                                destination: set_user_folder + file.name,
                                resumable: true,
                            }, function (err, file, apiResponse) {
                                if (err) {
                                    return res.status(200).send({
                                        message: err,
                                        type: "error"
                                    });
                                } else {
                                    console.log(apiResponse);
                                    return res.status(200).send({
                                        message: "File Uploaded",
                                        type: "success"
                                    });
                                }
                            });

【问题讨论】：

我正在寻找相同的解决方案来解析自定义响应。但是，如果您为 onChangeStatus 事件定义了回调，则会有一个名为“status”的参数。该参数表示文件的上传状态。该值将是一个字符串，当上传的不同点完成时更新。文件上传成功后，最终状态值为“done”。还有一个故障状态。在文档中，您可以看到所有可能的更改状态值。 react-dropzone-uploader.js.org/docs/props

标签： node.js reactjs google-cloud-storage

【解决方案1】：

您可以像这样从handleChangeStatus 获取服务器响应：

const handleChangeStatus = ({ meta, file, xhr}, status) => {
        if (status === 'done'){
            let response = JSON.parse(xhr.response);
        }  
};

【讨论】：

这似乎不适用于非 200 响应（例如 status === "error_upload"），这是有限制的 - xhr.response 是一个空字符串，尽管在我的情况下服务器返回 json