如何使用 Axios 从表单中发布文件？

在本文中，我们将讨论使用 Axios 库使用表单数据发出 POST 请求。 Axios 是一个基于 Promise 的 HTTP 客户端，可用于 Web 以及 Node.JS 开发。但是，在本文中，我们将严格指 Axios 的客户端使用。

首先，我们需要使用 CDN 链接将 axios 添加到我们的开发中：

为了使用从表单中提取数据，我们将使用 FormData() 方法。 formdata 方法将表单中输入的数据以键值对的形式进行转换，创建一个 multipart/form-data 对象。

HTML：

  
  
  
  
  Document

  
  
    Geeks For Geeks
  
  
    
    
    
    Submit
  

输出：

Axios 发布请求语法
有两种方法可以发出 axios post 请求：

1. 标准发帖请求：
   

   axios.post(url, data).then(callbackFn()).catch(callbackFn(err))
   url : The request url for HTTP POST.
   data : An object containing the POST data
   callbackFn() : Callback functions to handle the promise.

   使用配置对象发布请求

2. 
   轴（{
   方法：'发布'，
   网址：网址，
   数据：数据
   标头：标头
   }).then(callbackFn()).catch(callbackFn())
   

   method : 指定 HTTP 方法
   data : 包含 POST 数据的对象。
   headers(optional) ：指定与请求关联的标头的对象。

将表单数据发送到服务器的 Javascript 代码：

window.addEventListener('load', ()=>{
        
       const form = document.querySelector('form');
       form.addEventListener('submit', (e)=>{
           //to prevent reload
           e.preventDefault();
           //creates a multipart/form-data object
           let data = new FormData(form);
           axios({
             method  : 'post',
             url : '/',
             data : data,
           })
           .then((res)=>{
             console.log(res);
           })
           .catch((err) => {throw err});
       });
   });

使用 mock rest API 测试 Axios 请求：
前端代码：

    
        
        
        
        Document
    
    
        
            Geeks For Geeks
        
        
            
            
            
            Submit
        
  
        
            window.addEventListener("load", () => {
                const form = document.querySelector("form");
                form.addEventListener("submit", (e) => {
                    e.preventDefault();
                    let data = new FormData(form);
                    console.log(data);
                    axios({
                        method: "post",
                        url: "/",
                        data: data,
                    })
                        .then((res) => {
                            console.log(res);
                        })
                        .catch((err) => {
                            throw err;
                        });
                });
            });
        
    

基于 Node.js 的模拟 REST API 的代码：

const express = require('express');
const formidable = require('express-formidable');
  
const app = express();
  
app.use(express.static(__dirname+'/index.html'));
app.use(formidable());
  
app.get('/', (req, res)=>{
    res.sendFile(__dirname+'/index.html');
});
  
app.post('/', (req, res)=>{
      
    console.log(JSON.stringify(req.fields));
});
  
app.listen('3000', ()=>{
    console.log('listening to port');
  
});

样品请求数据：

控制台输出：

{"first-name":"Geeks", "last-name":"Geeks", "address":"Noida"}