迹忆客 专注技术分享

这篇简洁明了的文章向您展示了如何在 Axios 的帮助下在 React 中上传多个文件。这项工作并不太庞大，可以通过以下几个简单的步骤完成（您将在第 3 步中看到 Javascript 和 TypeScript 代码片段）：

1. 执行以下命令安装axios ：

npm i axios

2. 实现一个将enctype属性设置为multipart/form-data的表单，然后添加一个多文件输入元素，如下所示：

<form onSubmit={handleFormSubmit} encType='multipart/form-data'>
    <input type='file' name='file' multiple />
    <button type='submit'>Submit</button>
</form>

3. 创建一个将在提交表单时调用的处理函数：

const handleFormSubmit = async (e) => {
    // prevent the page from reloading
    e.preventDefault();

    // construct form data
    const formData = new FormData(e.currentTarget);
    const files = e.currentTarget.files;
    for (let i = 0; i < files.length; i++) {
      formData.append('files', files[i]);
    }

    // make a POST request with Axios
    const res = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    console.log(res);
};

如果我们使用 TypeScript 编写代码，处理函数将如下所示：

const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    // prevent the page from reloading
    e.preventDefault();
   
    // construct form data
    const formData = new FormData(e.currentTarget);
    const files = e.currentTarget.files;
    for (let i = 0; i < files.length; i++) {
      formData.append('files', files[i]);
    }

    // make a POST request with Axios
    const res = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    console.log(res);
};