javascript - 浏览器文件中转优化方式?

Question

再浏览器中需要从A服务器下载一个500M的文件（甚至更大），然后上传到B服务器，目前使用xhr方式直接下载和上传，但在过程中很卡，内存占用也很高。能否优化成从A服务器下载的过程中直接拿到响应流读取数据，每次读取就直接往B服务器的上传的请求流中写入，那数据就不需要暂存在浏览器。

使用fetch api可以拿到响应流读取数据，但是好像没有api可以向请求流中写数据

Answer 1

确实,浏览器把从A服务器下载文件需要的东西,如,url,token啥的,
告诉B服务器,让B服务器,直接在服务器上从A服务器下载文件即可

Answer 2

你为什么不在 B 服务器直接 fetch 文件不就好了？

不管在不在一个机房，你有第三方能同时触及两个机器，那么两个机器就应该可以互访。而且你也不一定非要用浏览器，在第三方机器上跑 node.js 不是一样的效果？

Answer 3

fetch('/file.zip').then((resp) => {  fetch('/upload', { body: resp.body, method: 'POST', duplex: 'half' });});

注意:目前safari不支持请求流; http1.1不支持请求流,需要HTTP2以上的协议版本

参考: https://developer.chrome.com/docs/capabilities/web-apis/fetch...

Answer 4

你的问题很有趣，并且是一个常见的浏览器端数据传输优化的问题。

首先，对于你的需求，你可以考虑使用WebRTC（Web实时通信）技术。WebRTC允许在浏览器之间直接传输数据，而不需要经过服务器。这可以大大减少数据传输的延迟和服务器负载。

但是，如果你的需求是从一个服务器下载文件，然后上传到另一个服务器，WebRTC可能并不适用。因为WebRTC主要用于点对点的实时通信，而不是用于文件传输。

在这种情况下，你可以考虑使用fetch API和Streams API结合来实现你的需求。你可以使用fetch API从A服务器下载文件，然后使用Streams API将数据流式传输到B服务器。

下面是一个简单的示例代码：

// 创建可读流const reader = response.body.getReader();// 创建可写流const writer = btoa(new TextEncoder().encode('')); // 初始化写入的数据const writable = new Blob([writer], {type: 'text/plain'}); // 创建可写流const sink = writer.write.bind(writer); // 获取写入方法// 创建管道new StreamPipe(reader, sink, writable);

在这个示例中，我们使用fetch API从A服务器下载文件，然后创建一个可读流（reader）。然后，我们创建一个可写流（writable），并使用StreamPipe类将可读流和可写流连接起来。这样，数据就可以从可读流直接传输到可写流，而不需要暂存在浏览器中。最后，我们可以将可写流上传到B服务器。

请注意，这只是一个简单的示例代码，可能需要根据实际情况进行修改和调整。另外，由于浏览器的安全限制，你可能需要使用HTTPS协议来传输数据。