嘗試使用 axios 和 formData 發布數據，但它是空的

Question

我正在使用 Vue3 和 axios 使用FormData發布表單，但它是空的，什么都沒有傳遞。

{"formData":{}}

這就是我正在做的事情：

const formData= new FormData();
formData.set("name", name);

axios.post("postform",  formData);

我也試過這個：

formData.set("name", "John Doe");
axios.post("postform",  formData);

和這個：

formData.append("name", "John Doe");
axios.post("postform",  formData);

但沒有成功。 沒有錯誤，它只是空的。

我在 PHP 中檢索它們，如下所示：

 echo $request->input("name");

所以我的問題是：

如何使用FormData發布數據？

Answer 1

如果您沒有發送任何文件（或者您的表單不是 maltipart/form-data），您可以使用以下方法通過 axios 發送數據：

let formData = {};
formData.name =  "John Doe";
axios({
  url: "postform",
  method: "POST",
  data: formData
});

編輯：

如果您要發送任何文件，那么在我的情況下，以下內容對我有用：

const formData = new FormData();
formData.append("name", "hello world");



axios({
    url: 'postform',
    method: "POST",
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Answer 2

您可以將您的 FormData Object 轉換為簡單的 object，然后將該 object 發送到服務器。

const formData = new FormData();
formData.set("key1", "value1");
formData.set("key2", "value2");

let data = {};

// convert the key/value pairs
for(var pair of formData.entries()) {
    data[pair[0]] = pair[1];
}

axios.post("postform",  data);

Answer 3

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Footer from './Footer';
import Header from './Header';
import Map1 from './img/google-map.png';
import Map2 from './img/google-map-2.png';

const Forms = () => {
   
  const [name, setCompanyName] = useState('')
  const [address, setAddress] = useState('')
  const [phone, setContact] = useState('')
  const [company_logo, setLogo] = useState('')
  const [website, setWebsite] = useState('');
  const [faceBook, setFacebookUrl] = useState('');
  const [instagram, setInstagramUrl] = useState('');
  const [twitter, setTwitterUrl] = useState('');
  const [location, setLocation] = useState('');
  const [city, setCity] = useState('');
  const [google_map_location, setGoogleLocation] = useState('');
  const [momo_number, setMomoNumber] = useState('')
  const [account_type,setAccount] = useState('');
  const [industry_uuid, setIndustry] = useState('');
  const [momo_acct_name, setMomoName] = useState('');
  const [background, setBackground] = useState('');
  const [country_uuid, setCountryId] = useState(null);
  const [accountList, setAccountList] = useState(null);
  const [industryList, setIndustryList]=useState(null);
  const [gps, setGps] = useState('');
  const [token, setToken]=useState(null);


  useEffect(() => {
      

    axios.get('https://rosmallonline.com:7070/ecoms-api/setup/get_countries/')
      .then(res => {
        console.log(res.data.country[0].country_id);
        const countryid = res.data.country[0].country_id;
        setCountryId(countryid);
      })
      .catch(console.log)
    
      axios.get('https://rosmallonline.com:7070/ecoms-api/setup/get_industries/')
      .then(res2 => {
        console.log(res2.data);
        setIndustryList(res2.data.industries);
      })
      .catch(console.log)
  
      axios.get('https://rosmallonline.com:7070/ecoms-api/setup/get_account_types/')
      .then(res3 => {
        console.log(res3.data);
        setAccountList(res3.data.account_types);
      })
      .catch(console.log)

      setToken(sessionStorage.getItem('token'));
  },[])




  const  submitHandler = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('file', company_logo, 'company_logo');
    formData.append('name', name);
    formData.append('address', address);
    formData.append('phone', phone);
    formData.append('industry_uuid', industry_uuid);
    formData.append('country_uuid', country_uuid);
    formData.append('account_type', account_type);
    formData.append('city', city);
    formData.append('social_media',{
      'faceBook':faceBook,
      'instagram':instagram,
      'twitter':twitter
    });
    formData.append('background', background);
    formData.append('location', location);
    formData.append('website', website);
    formData.append('gps', gps);
    formData.append('google_map_location', google_map_location);
    formData.append('momo_number', momo_number);
    formData.append('momo_acct_name', momo_acct_name);

   
    await axios.post('ecoms-api/company/update_company_profile/', 
      formData
    ,{
      headers: {
        'Content-Type': 'multipart/form-data',
        'X-COMPANY-USER-AUTH': token
     }
    }).then(response => {
      console.log(response);
      if(response.data.status === 200){
        alert(response.data.message)
    } else {
        alert(response.data.message)
    }
    });
           
  }


        return (
            <div className="page">
        
      </div>

        );
    }


export default Forms;