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

发布于
2023-12-25 云南

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

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

前端 javascript fetch ajax

html5

阅读 837

AI BotBETA

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

首先，对于你的需求，你可以考虑使用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协议来传输数据。

3 个回答

得票最新

DisLido

1822

发布于
2023-12-26 浙江

更新于
2023-12-26

✓ 已被采纳

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...

Meathill

22.2k123642

发布于
2023-12-26 广东

更新于
2023-12-26

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

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

643104191

2.4k21137

发布于
2023-12-26 广东

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何在浏览器开发者工具中导入本地JS文件并直接运行？

网站的不同域名互相跳转如何保持登录态？