如何在浏览器中上传和下载任何文件？

Question

这是我正在进行的实验的一部分。

假设我通过输入类型文件标签上传了一个文件，例如：.psd（photoshop 文件）或 .sketch（草图），它显示文件的名称并且可以下载为 .psd / .sketch单击按钮（无数据损坏）

如何实现？

编辑 1：

我要添加更多信息，因为上面的内容并不完全清楚。

这是流程：

注意：sockets.io没有连接数据库。它只是监听并响应连接到服务器的任何人。

我已经涵盖了 enc/dec 部分。唯一的事情是上传和存储为？在一个变量中，因此它可以被加密并在接收端做相反的事情（dec 和 downlodable）

再次感谢:)

Answer 1

我认为这些是你的问题：

当用户在您的文件元素上打开文件时，您将能够使用其 files 属性:

for (const file of fileInputEl.files) {
  // Do something with file here...
}

每个文件都实现了 Blob interface, which means you can call await file.arrayBuffer() to get an ArrayBuffer，您可以直接在其他库中使用它。至少，您可以从中创建字节数组。

现在，要发送数据，我强烈建议您使用 HTTP 而不是 Socket.IO。如果您仅以一种方式发送数据，则不需要 Web Socket 连接或 Socket.IO。如果你发出一个普通的 HTTP 请求，你就把它的所有处理工作都交给了浏览器。在上传端，可以这么简单：

fetch('https://files.example.com/some-id-here', {
  method: 'PUT'
  body: file
});

在接收端，你可以简单地打开一个link <a href="https://files.example.com/some-id-here">.

现在，服务器部分...你说你只想传递这个文件。您根本没有指定您在服务器上做什么。所以，抽象地讲，当你收到一个文件请求时，你可以等待，不回复数据，直到发送端连接并开始上传。当发送端发送数据时，立即将该数据发送给接收端。实际上，您可以将发送端的请求通过管道传输到接收端的响应。

您可能会收到一些选择 ID 的初始信号，以便两端都知道从哪里 send/receive。您可以通过聊天协议中的常用方法处理此问题。

其他一些需要考虑的事情...WebRTC。已经有几个 off-the-shelf tools 可以执行此操作，可以在其中发送数据 peer-to-peer，为您节省一些带宽。这有一些复杂性，但它可能对您有用。

How to upload and download any file in the browser?