当用户向服务器发送数据时,我试图在我的 React Native 应用程序中实现一个进度条。我正在尝试使用 axios 中的 onUploadProgress 选项来获取 post 请求的进度并将其映射到 react native 中的 Progress.Bar 组件。 onUploadProgress 没有获得持续的进度更新,而是立即返回 1(表示上传完成),但我实际上直到几分钟后才从服务器获得响应。这会导致进度条立即填满,这显然让用户感到困惑,因为响应尚未完成。我在谷歌上搜索了这个并找到了关于这个问题的类似主题和帖子,但我似乎找不到解决方案。 这是我的代码的样子:
//Post request to server...
const uploadVideo = async (id, uri, onUploadProgress) => {
const formData = new FormData();
formData.append("video", {
name: uri,
type: "video/mp4",
uri,
});
const result = await axios.post(`${endpoint}/${id}/videos`, formData, {
headers: {
"Content-type": "multipart/form-data",
},
onUploadProgress: function (progress) {
onUploadProgress(progress.loaded / progress.total);
},
});
return result;
};
//Function inside component that calls the POST function...
//media.uri comes from the user selecting a video from their camera roll using the expo image picker package
//setUploadProgress sets the value I use to pass the progress values to the Progress.Bar component
const submitVideo = (accountID) => {
const response = await uploadVideo(
accountID,
media.uri,
function (progress) {
setUploadProgress(progress);
};
//code to do something with the response from the server
}
POST 请求本身正在工作,因为视频已正确上传到服务器,并且我从服务器获得了预期的响应。只是 onUploadProgress 给我带来了问题。
感谢任何可以提供帮助的人!