html - 如何使用 html5 和文件 API 将单个文件从一个客户端浏览器发送到另一个客户端浏览器而不将其保存在服务器 (node.js) 上

Question

我需要将文件从一个客户端浏览器发送到另一个客户端浏览器，而不必将其保存在服务器 (node.js) 上，我如何使用 HTML5 和文件 API 来做到这一点？

实际实现的解决方案:

最终解决方案如下所示:

1. 在做种客户端时从输入[type=file]获取文件

2. 文件数组包含一个存储文件对象的键。使用slice/mozSlice方法将其分割成 block ，以便Object.slice将返回Blob对象。

3. 使用FileReader可以将Blob读入原始二进制数据或base64编码数据。 FileReader 实现 readAsDataURL(blob) 来读取 Base64，并实现 readAsBinaryString(blob) 来读取原始二进制数据。请参阅“onloadend”FileReader 事件以访问从 blob 读取的数据。

4. 您应该实现根据 block 大小(通常为 1024 * 64)和下一个切片开始/停止位置计算 block 数量的逻辑，以获得完全相同大小的 block

5. 编码数据通过socket.io发送到node.js，其中唯一的服务器端逻辑是将接收到的数据发送到也通过socket.io连接的pear

6. 我猜最有趣的是在 pear 的客户端浏览器上将所有这些 block 组合成 blob。从原始二进制数据创建 Blob 将导致 Blob 大小错误，从而导致文件大小错误。这就是我们从 Seeder 传输 Base64 编码数据的原因。 解码可能会成为问题，因为我们必须自己实现它。

   function decode64 (data) {
       var mimeString = data.split(',')[0].split(':')[1].split(';')[0],
       // remove all chars before ','
       byteString = atob(data.split(',')[1]),
       // if BlobBuilder available
       ab = new ArrayBuffer(byteString.length),
       ia = new Uint8Array(ab);
   
       for (var i = 0; i < byteString.length; i++) {
           ia[i] = byteString.charCodeAt(i);
       }
       blob    = new Blob([ia], {'type' : (mimeString) });
   return blob;
   }
   

将解码后的数据保存到 blob 中后，我们必须将其推送到包含其他解码 block 的数组中。 7. 从解码为 blob 的 block 数组创建一个 Blob，像这样

new Blob (array_of_decoded_blobs_returned_by_decode64_function, {type:'mime-type'})

使用文件API将blob写入文件或做任何你想做的事情

Answer 1

Websocket 是我能想到的唯一实现此目的的方法，而且您仍然需要服务器端代理。

参见:Do websockets allow for p2p (browser to browser) communication?