前端上传文件流给后端需要注意什么

文
章
目
录

• 业务背景
• 文件流上传的注意事项
• 1. 请求参数的构建
• 2. 请求头的设置
• 3. 获取原始文件对象
• 4. 请求方式的转变

你知道前端上传文件流给后端需要注意什么吗？今天我们就一起来聊一下。

业务背景

在常规的业务流程中，通常会将文件上传至公共服务器，随后获取文件地址并将其传递给对应的业务模块。然而，在一些敏感业务场景中，出于安全性和资源优化的考虑，文件需要存储在业务域下。

一方面，这可以增强数据的安全性；另一方面，也能避免因文件存储在公共服务器上而造成的云资源空间浪费。此外，在某些业务场景中，为了避免不必要的交互成本，例如用户点击上传文件，但最终业务并未真正使用该文件，且用户下次进入时也无需再展示该文件，此时可以利用本地文件进行临时展示。以腾讯为例，它提供了一些云地址用于文件的临时展示，当业务真正需要时，再从腾讯云端下载该文件。

文件流上传的注意事项

1. 请求参数的构建

过去的技术方案中，文件上传通常需要通过表单（form）提交来实现。如今，这种做法已不再适用，取而代之的是使用 FormData 对象。例如，可以通过以下代码构建请求参数：

let data = new FormData(); 
data.append(\"file\", file);

这种方式更加简洁高效，能够更好地满足现代文件上传的需求。

2. 请求头的设置

在设置请求头时，有两种常见的方法。一种是在每个请求方法中单独添加请求头，另一种是在传参时通过增加统一的方法规则来实现。例如，可以在传参时添加一个类似 file 的标识，然后在请求的中间件中根据该标识自动添加请求头。以下是设置请求头的示例代码：

headers: { 
    \"Content-Type\": \"multipart/form-data\",
 },

合理设置请求头对于确保文件能够正确上传至后端至关重要。

3. 获取原始文件对象

在大多数现代开发场景中，通常不需要手动编写上传控件，因为像 Ant Design（antd）和 Element UI（ele）等前端框架会为我们封装好文件对象。然而，为了确保后端能够顺利接收文件，我们需要与后端开发人员达成一致，明确他们期望接收的文件格式。
一种常见的做法是将文件对象转换为 Blob 对象，然后将其传递给后端。另一种做法是直接传递 File 对象，但需要注意的是，不同组件封装后的文件对象可能有所不同。例如，在 Ant Design 中，原始文件对象是 file.originFileObj，而在 Element UI 中，原始文件对象是 file.raw。以下是文件对象的属性示例：

通常情况下，后端需要根据这些标准对象获取文件名、大小和类型等信息。在文件名中，通常需要包含扩展名以便进行相关判断，否则可能会导致错误。

4. 请求方式的转变

由于整个文件上传请求已经转变为一个常规的 API 请求，而非传统的表单提交，因此可以通过常规的 response.code 来判断请求的成功与否，而无需为文件流的上传设置特殊的错误捕获机制。