node.js - OnUploadProgress 只被调用一次

Question

我正在尝试跟踪我的反应本机应用程序上数据上传的进度。我使用插件 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 上将网络更改为慢速 3G然后我看到了几个正在取得进展的电话。

您可以参考此 github 问题了解更多详细信息。

Answer 2

在花费了相当长的时间测试上面建议的答案并使用限制的互联网速度和 10MB 图像之后，我仍然面临与返回值相同的问题1时console.log(progress.loaded / progress.total);

我用其他文件大小超过 25mb 的更大图像再试了几次。也没有运气。所以我走极端，最终发现问题保持不变 -文件大小不足以让算法在完全上传之前记录任何先前的值。

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

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

最后一步是为函数使用一个非常大的图像。我在这个网站上发现了一些大小超过 200MB 的图像。

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

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

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