Antd多文件上传-后台如何接收非空文件？

2023-09-01 15:47:00

在 Ant Design 组件库中，Upload 组件是一个用于文件上传的强大组件，提供了多种特性和选项。其中，当需要上传多个文件时，通常的做法是配置后端接口地址，以便组件自动上传文件。但是，当文件数量较多时，为了避免一次性上传对服务器造成过大压力，需要进行手动上传。然而，许多开发人员在使用 Antd 进行多文件上传时，却遇到了后台接收到的文件为空的问题。本文将针对这个问题进行深入剖析，并提供解决方案。

问题

在使用 Ant Design 的 Upload 组件进行多文件上传时，如果选择了手动上传的方式，在点击上传按钮后，后台无法正常接收文件，导致无法进行后续处理。

解决方案

检查请求头

确保在请求头中设置了正确的 Content-Type。对于文件上传，通常需要设置 Content-Type 为 multipart/form-data。
检查文件大小

确保上传的文件大小在服务器允许的范围内。如果文件过大，可能会导致服务器拒绝接收。
检查服务器端代码

确保服务器端代码正确配置了文件上传处理逻辑。对于 Node.js 来说，可以使用 multer 库来处理文件上传。
检查后端接口地址

确保 Upload 组件的 action 属性指向正确的后端接口地址。

使用FormData对象

FormData对象可以很轻松的创建表单数据，并且兼容各种浏览器。例如：

const formData = new FormData();
formData.append('file', file);

然后，在请求中使用 formData 对象来传递数据。例如：

fetch('http://localhost:8080/upload', {
  method: 'POST',
  body: formData,
})
.then(res => res.json())
.then(data => {
  // 文件上传成功后的处理逻辑
});

修改前端代码

在进行文件上传时，使用以下方式来进行文件上传：

const onChange = (info) => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === 'done') {
    // 文件上传成功后的处理逻辑
  } else if (info.file.status === 'error') {
    // 文件上传失败后的处理逻辑
  }
};