掌握文件上传：Web开发人员的指南-DEV365 开发者社区

开发人员构建Web应用程序正在从客户端上传文件时（通常是Web浏览器）时，开发人员面临的最常见任务之一。无论是小应用程序还是大型应用程序，您都需要上传图像，PDF文档和其他类型的文件。然后，这些文件通常存储在服务器上并在数据库中索引，因此可以按需提供。

请注意，我在这里谈论的上传类型是通过HTML表单或使用与HTML表单相同的方法，并且是最常见的。当人们谈论上传文件时，这就是他们通常所指的。

上传文件的机制

文件上传通常作为HTTP POST请求发送到服务器。然后，请求主体将包含有关从客户端上传的文件以及文件本身的内容的元数据。发送的内容可能看起来像这样。

POST /file_up HTTP/1.1
Host: 127.0.0.1
Content-Type: multipart/form-data; boundary=---------------------------42828225182062843700116470094
Content-Length: 244463

-----------------------------42828225182062843700116470094
Content-Disposition: form-data; name="req"
upload_file
-----------------------------42828225182062843700116470094
Content-Disposition: form-data; name="myfile"; filename="pic7.jpg"
Content-Type: image/jpeg
\377\330...

这样的消息中有什么？

首先，有一个独特的定界符（在这种情况下， - -37487108932486351905827665017，但总的来说，它将是其他用来分开消息部分的字符串。它的生成方式使其在消息的任何部分中都不存在，因此可以用作数据件之间的定界符。

这些件告诉服务器所有需要知道的服务器。以这种方式传达的一种信息是告诉服务器数据来自Web表单（content-disposition：form-data;â）。

接下来，有来自HTML表单的名称/值对。例如，当您填写带有姓名和地址的表格时，它们将以这样的成对作为值发送。在这种情况下，有一个req = upload_file -

最后，有一个或多个文件。在这里，用URL字段给出了一个文件，并带有实际的文件名。文件内容类型为JPG（指定为图/jpegâ），然后是文件的二进制内容（在这种情况下，以\ 377 \ 330 \ 330â€）。 P>

在描述的方式中，可以指定任何数量的名称/值对以及上传任何数量的文件。

服务器必须正确解析并提取数据以获取所有名称/值对以及所有文件名及其内容。然后这些文件可以保存，传递在其他地方或以某种方式处理。

这是Web上载在大多数情况下的工作方式，Web客户端/服务器遵循此过程，因为它是RFC7578中描述的互联网标准。

几乎所有语言和框架都支持文件上传，其复杂程度不同。以下是将文件上传到服务器使用C编程语言的示例。

先决条件

Nginx被用作Web服务器，因此请在继续之前进行安装。如果尚未设置，则可能需要为其配置防火墙以允许HTTP流量（请参阅ufw，firewall-cmd等）。

此示例使用Vely应用程序开发框架。 Install首先。

您将需要Sudo特权来安装软件并创建用于测试的网页。

上传示例

要在此处运行示例，请在其自己的目录中创建一个file_upâ（请参阅vf，有关Vely的程序经理的更多信息）：

mkdir upload_example
cd upload_example
sudo vf -i -u $(whoami) file_up

创建文件 - upload_file.velyâ，然后将其复制到它：

#include "vely.h"

void upload_file () {
    input-param myfile_filename
    input-param myfile_location
    input-param myfile_ext
    input-param myfile_size
    out-header default
    @File <<p-out myfile_filename>> uploaded to <<p-out myfile_location>> (extension <<p-out myfile_ext>>, size <<p-out myfile_size>>).
}

要作为应用程序服务器运行此代码，请首先：

vv -q

启动可以上传文件的应用程序服务器：

vf file_up

这是如何运作的

vely具有用于文件上传的内置功能，并且上述详细信息将自动完成。上传文件时，将其视为任何其他输入参数。因此，您在服务器端上拥有的代码：

input-param myfile_filename
input-param myfile_location
input-param myfile_ext
input-param myfile_size

假设您上传的文件将是一个名为myfile的URL字段，然后您可以获取其实际文件名（即MyFile_Filename），它的位置S上载在服务器上（myfile_location），其扩展名（myfile_ext）和字节中的大小（myfile_size-）。基本上，URL字段名称附加了下划线和您想要获取的信息的种类。

最后一部分：

@File <<p-out myfile_filename>> uploaded to <<p-out myfile_location>> (extension <<p-out myfile_ext>>, size <<p-out myfile_size>>).

是一个以@@开头的output_statement，它向客户端输出文本。 p-out语句将打印一个字符串，在这种情况下，它通过使用<<和'>>进行了内衬。以这种方式输出数据非常简单（可读）。

设置Web服务器

下一步是设置Web服务器。您刚刚启动了一个应用程序服务器，根据定义，它位于Web服务器后面。这是有许多原因的好：性能，安全性，分层的分离。您可以使用支持FASTCGI协议的任何Web服务器（PHP-FPM使用的相同协议）；在此示例中，我将使用固有支持FastCGI的NGINX。很好，因为没有任何配置。

正如我提到的，要开始，您将需要安装nginx。完成后，您将需要编辑NGINX配置文件。对于Ubuntu和类似：

sudo vi /etc/nginx/sites-enabled/default

在Fedora和其他系统上可能是：

sudo vi /etc/nginx/nginx.conf

在{}部分中添加以下内容，请注意指定您应用程序unix套接字的路径的fastcgi_pass参数：

location /file_up { include /etc/nginx/fastcgi_params; fastcgi_pass unix:///var/lib/vv/file_up/sock/sock; }
client_max_body_size 20M;

最后，重新启动nginx：

sudo systemctl restart nginx

这将通过UNIX套接字将NGINX Web服务器连接到您的应用程序服务器，这确实是一个非常快速的连接，因此通过Web服务器提出的请求由您上面的代码回答。 client_max_body_size - 指令有助于避免请求实体太大错误，即默认情况下，nginx允许仅允许文件上传到最多2MB的大小，这是不多的 - 这样，我们将极限提高到20MB。

您现在已经完成了！您的应用程序已准备就绪。

通过上传文件测试

要测试，创建一个可以通过Web服务器打开的HTML文件（即网页）。该文件应在NGINX的根文档目录下。要查看系统上的该根目录在哪里，请查看上面的配置文件，并在“服务器” {}'部分下查找“根指令”，例如，它可能看起来像：

root /usr/share/nginx/html/;

在这种情况下，目录是/usr/share/nginx/html/'的注释，它可能会根据分布和发布而有所不同。创建一个文件âtest_upload.html-，然后将以下内容复制到其中：

<form action="/file_up" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="req" value="upload_file">
    <label for="myfile">File:</label>
    <input type="file" name="myfile" value=""><br><br>
    <input type="submit" value="Submit">
</form>

以上是一种简单的HTML表单，它将调用您的Vely代码。它如何工作？

请注意

element中的操作属性：它是/file_up-，这是您应用程序的应用程序路径（默认情况下，它是应用程序的名称在前斜线之前），它是您添加的Nginx指令中的位置。

所使用的请求方法是帖子，上传文件的html字段的名称是myfileâââ– thistion'类型的元素文件，您可以选择一个本地文件上传。

最后，提交按钮作为类型的元素。

这是一个非常简单的设置，您可以为Web应用程序构建。

要测试，转到浏览器并（假设您正在本地计算机上执行此操作，否则更改为网址）：

http://127.0.0.1/test_upload.html

您现在可以选择一个文件（在此示例中，pic7.jpgâ），上传它，您将看到输出：

File pic7.jpg uploaded to /var/lib/vv/file_up/app/file/18648/2107645QBsCL (extension .jpg, size 244124).

这意味着您的文件已上传到服务器，并保存在位置 - /var/lib/vv/file_up/app/file/file/18648/2107645qbsclâ。此文件位于Vely file_storage中，即使同时上传它们，也会生成其名称在所有上传的文件中唯一。组织文件的方式是使它们可用于快速检索，因此您不必担心命名文件''存储在数据库中的某个地方。您可以将文件留在那里（因为Vely文件存储旨在保留文件以进行快速访问），也可以通过使用rename-file语句将其移动到其他地方。

结论

，你有它。现在，您可以将文件上传到服务器。当然，这里的应用程序是基本的，但它显示了基础知识。您可以上传多个文件，添加其他文本字段，将文件位置保存到数据库，然后根据您的应用程序的需求处理文件。

图像版权（c）Sergio Mijatovic 2023
本文根据CC-BY-4.0许可，该文章允许在商业上复制和重新分配 - 有关更多详细信息，请参见许可。