OnUploadProgress仅被调用一次

Question

我正在尝试在我的React Native应用程序上跟踪数据上传的进度。我使用插件apiSauce调用本地运行的服务器（具有baseURL的节点服务器：192.xxx.x.xx“：9000 /）。

在前面，我使用“ apisauce”和以下代码调用了我的api：

const apiClient = create({
  baseURL: "http://192.xxx.x.xxx:9000/api",
});

return apiClient.post(endpoint, myData, {
    onUploadProgress: (progress) => {
      console.log(progress.loaded / progress.total);
    },
  });

从那以后，除了控制台中的几条日志外，例如：0.1，0.2、0.3，...，0.9、1.0，但现在得到的只是一个日志：1。

我不明白为什么onUploadProgress仅被触发一次，我试图限制用于测试的android虚拟设备上的网络，并且还使用baseURL运行服务器：127.0.0.1似乎无法解决我的问题。

提前致谢

Answer 1

我遇到了同样的问题，代码也很好（类似于您发布LePetitPrince的代码），问题在于在本地执行此操作时的速度（它立即上载，因此仅生成了一份进度报告）。

要真正在控制台上查看进度，我去了一个10MB的图像文件（该文件应该可以工作：https://commons.wikimedia.org/wiki/File:Pizigani_1367_Chart_10MB.jpg），并在DevTools上将网络更改为Slow 3G，然后我看到了几个呼叫取得进展。

您可以参考this github issue以获得更多详细信息。

Answer 2

在花了相当长的时间测试上述建议的答案后，Internet速度和10MB图像受到限制，当1时，返回值console.log(progress.loaded / progress.total);仍然遇到相同的问题

我对文件大小超过25mb的其他较大图像进行了多次尝试。也没有运气。因此，我走了极端，最后发现问题仍然存在-文件大小不足以使算法在完全上传之前记录所有以前的值。

所以我的方法是像其他人一样使用React Native Debugger将Internet Speed降低到3G。

在那之后，您将需要刷新您的应用程序，以使更新的网络加速并在模拟器上运行。

最后一步是对该功能使用非常大的图像。我发现一些图像大小超过200MB on this site。

为节省您的时间，我在这里为您提供了一个网址： https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73726/world.topo.bathy.200406.3x21600x10800.png

只需复制并粘贴它即可替换现有的uri，您将能够看到按预期记录的多个比率。

请注意，这只是为了让您正确查看代码功能。您需要将uri编辑回正确的上载地址。

希望这对您有帮助。如果有人觉得这有帮助，我将不胜感激。干杯! ：）