如何在React中使用Axios Post Request发送表单数据（详细教程）React是全球开发者使用的领先编程语

React是全球开发者使用的领先编程语言。2020年，有超过8787名行业领袖在使用React.js。因此，多个开发人员更愿意选择React和Javascript。多种编码类型可用于非文件传输。

表格数据

其中一种编码类型允许文件在传输到服务器进行处理之前被纳入所需的表格数据中。其他一些用于非文件传输的编码类型包括text/ plain, application/x-www-form-urlencoded等。

多部分或表单数据允许文件包含在表单数据中，而text/ plain则以纯文本形式发送数据，不需要编码。它用于调试，不用于生产。application/x-www-form-urlencoded将数据编码为查询字符串--用"="和其他符号如"&"来分隔键-值对。

所有这些编码类型都可以使用 "enctype "属性以如下方式添加到HTML中：

<form action="/path/to/api" method="post" enctype="multipart/form-data"></form>

这些编码类型与HTML "

"标签，在不同的情况下，默认设置效果很好；这个属性经常缺失。

Axios

Axios是Node.js和浏览器的基于承诺的HTTP客户端。它从浏览器发出XMLHttpRequests，从Node.js发出HTTP请求。此外，它支持 "Promise "API，可以拦截响应和请求等。Axios可以取消请求，转换请求和响应数据，为JSON数据自动转换，并提供客户端支持以防止 "XSRF"。

Axios依赖于本地ES6 Promise的实现来支持。如果系统不支持ES6 Promises，用户很容易进行polyfill。此外，它在很大程度上受到 "Angular JS "中提供的" $http service "的启发。或多或少，Axios是一种有效的方法，提供一个类似于"$ htttp "的单一服务，以便在AngularJS之外使用它。

浏览器支持：Edge, IE, Opera, Safari, Mozilla Firefox, Google Chrome等。

常见的请求方法

Axios中的一些常用请求方法是：

axios.patch(url[, data[, config]] )
axios.put(url[, data[, config]] )
axios.post(url[, data[, config]] )
axios.options(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.get(url[, config])
axios.require(config)

常见的实例方法

Axios中一些可用的实例方法有：

axios#getUri([config])v
axios#patch(url[, data[, config]])
axios#put(url[, data[, config]])
axios#post(url[, data[, config]] )
axios#options(url[, config])
axios#head(url[, config])
axios#request(config)
axios#delete(url[, config])
axios#get(url[, config])

1.安装Axios

Axios通常用于通过 "fetch() "命令发送HTTP请求。对于不同的Node项目，使用 "npm "来安装Axios是很容易的：

npm install axio
or
yard add axios

另一种安装Axios的方法是直接将其包含在CDN中，或者将文件下载到系统中。标记中的库是像这样被包含的：

<script src="”https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js”"></script>

2.用HTML和Axios设置 "enctype"

设置编码类型以通过表单数据发送多部分数据或文件是很重要的。用Axios设置默认的全局编码类型很容易，它以下列方式强制执行所有Axios请求的multipart/ form - data编码类型：

axios.defaults.headers.post[‘Content-Type’] = ‘multipart/form-date’;

编码类型可以通过以下方式改变 "头文件"，为单独的单个请求定义：

axios.post(“api/path”, formData, {
    headers: {
    “Content-type”: “multipart/form-date”,
},
});

第三种设置编码类型的方法是在""中设置 "enctype"。 "的具体形式。Axios以下列方式采用了以下编码类型：

<form action=”/api-endpoitn” methot=”POST”, enctype=”multipart/form-date”>

3.Axios和Express

让我们考虑这样的情况：在Axios和Express中创建一个有两个输入的简单表单。一个是用来让用户提交他们的名字，另一个是用来选择资料图片的，方法如下：

        Name : <input type="text" name="username" placeholder="Enter Username">
        <br> <br>
        Select a file :
        <input type="file" name="userDp" placeholder="ChooseProfile Picture">
        <br> <br>
        <button type="submit">
          Submit
        </button>

如果程序中没有使用Axios，默认的事件集就会展开。按下 "提交 "按钮将发送一个 "POST "请求到我们服务器的"/update - profile "端点。这个默认行为可以通过给按钮附加一个事件监听器来覆盖，并阻止默认事件的展开。

下面是一个简单的例子：附加事件监听器，阻止默认行为，并使用Axios发送我们的表单数据。由于所有Axios请求都是同步进行的，因此在发送请求和改变头文件之前，很容易对请求进行定制：

const form = document.querySelector("form");
  if (form) {
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const formData = new FormData(form);
      axios
        .post("/update-profile", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    });

当填写表格并点击 "提交 "按钮时，请求被转发到 "http: / / localhost : 5000 / update - profile "端点，并有专门的上传支持文件。这一切都归结为端点，它接收并处理请求。

4.Express后端

REST API是使用Express.js进行后台支持的。因此，开发人员可以专注于开发而不是不同的设置。这种技术设置服务器并处理请求。Express可通过中间件进行扩展，并在最小化的编码上工作。通过安装简单或复杂的中间件，扩展Express的核心功能变得很容易。

Express可以用 "npm "来安装。"express - fileupload "中间件可用于Express的简单文件处理。同样的简单技术是。

npm install express express-fileupload

让我们启动一个服务器，定义接受"/update - profile "的 "POST "的端点：

const express = require("express");
var fileupload = require("express-fileupload");
const app = express();
app.use(fileupload());
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.post("/update-profile", (req, res) => {
  let username = req.body.username;
  let userPicture = req.files.userPicture;
  console.log(userPicture);
  res.send(`
    Your username is: ${username}<br>
    Uploaded image file name is ${userPicture.name}
  `);
});
app.listen(3001, () => {
  console.log("Server started on port 3001");
});

通过请求处理程序传递的 "req "请求带有表单发送的数据。主体包含来自不同设置字段的所有数据，如 "用户名"。所有创建的文件都位于 "req "对象中的 "files "字段下。此外，通过 "req . body . username "可以很容易地访问输入的 "用户名"。上传的文件可以通过 "req . files . userPicture "来访问。

当表单与HTML页面一起提交时，在浏览器控制台中会收到以下响应：

如果需要编码类型、文件名等信息，很容易将 "req. files .userPicture "记录到控制台。

总结一下

因此，很容易理解Axios发送表单数据的帖子请求。Axios是领先的异步HTTP库，用于发送携带文件或多部分数据的post请求。REST API被用来处理请求。它使用 "enctype "属性接受传入的文件和其他表单数据。这个属性是用Axios设置的。