React:如何使用 Axios 上传多个文件

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

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

npm i axios
  1. 实现一个将enctype属性设置为multipart/form-data的表单,然后添加一个多文件输入元素,如下所示:
<form onSubmit={handleFormSubmit} encType='multipart/form-data'>
    <input type='file' name='file' multiple />
    <button type='submit'>Submit</button>
</form>
  1. 创建一个将在提交表单时调用的处理函数:
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);
};
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:如何使用 Axios 上传多个文件