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

【问题标题】：How to upload and download any file in the browser?如何在浏览器中上传和下载任何文件？
【发布时间】：2020-10-07 15:24:13
【问题描述】：

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

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

这将如何实现？

编辑 1：

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

这是流程：

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

我得到了 enc/dec 部分。唯一的事情是上传和存储为？在一个变量中，因此它可以被加密并在接收端执行相反的操作（dec 和可下载）

再次提前感谢:)

【问题讨论】：

<a href="file.psd">file.psd</a> 有什么问题？
将download 属性添加到a 标记
看看：javascript file encryption 虽然它看起来确实有好几年了。
那么，您想为此使用 Socket.IO 吗？如果您可以控制服务器端连接，为什么不通过 HTTP 来控制呢？这样，您可以获得传输压缩，浏览器处理所有缓冲，您不必将整个文件加载到内存中，等等等等。一侧可以执行简单的 HTTP PUT，而另一侧可以执行 HTTP GET .该文件可以直接通过您的服务器流式传输。另外，这样你就可以只使用 HTTPS...
@rohanharikr 你有什么问题？您对我说，这与传输无关，而与加密有关。然后您回复 ATD，这与加密无关，而与传输有关。它是哪一个？而且，我再次问你，为什么你不能使用 HTTP 呢？

【解决方案1】：

我想这些是你的问题：

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

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

每个文件都实现了Blob interface，这意味着您可以调用await file.arrayBuffer() 来获得ArrayBuffer，您可以直接在其他库中使用它。至少，您可以从中创建字节数组。

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

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

在接收端，您只需打开一个链接<a href="https://files.example.com/some-id-here">。

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

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

需要考虑的其他一些事情...WebRTC。有几个off-the-shelf tools 已经这样做了，数据可以点对点发送，为您节省一些带宽。这有一些复杂性，但它可能对您有用。

【讨论】：