javascript - 无法将图像附件发送到后端

Question

我正在尝试将图像数据与其他输入字段一起发送，但能够成功发送其他信息，但不能发送图像。请帮助我使用以下代码，我必须从 React 前端发送图像附件。

CompanyForm.js

import React, { useState } from "react";
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

function CompanyForm() {
  const [name, setName] = useState("");
  const [title, setTitle] = useState("");
  const [price, setPrice] = useState("");
  const [upload, setUpload] = useState(null);

  const navigate = useNavigate();

  const AddInfo = async () => {
    let formField = new FormData()

    formField.append('name', name)
    formField.append('title', title)
    formField.append('price', price)
    formField.append('upload', upload)

    if (upload !== null) {
      formField.append('upload', upload)
    }


    const AddInfo = () => {
      const formField = new FormData()
      formField.append('name', name)
      formField.append('title', title)
      formField.append('price', price)
      formField.append('upload', upload)

    }

    await axios({
      method: 'POST',
      url: 'http://localhost:8000/',
      data: formField,

      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },

    }).then((res) => {
      console.log(res.data)
      navigate('/')
    })

  }


  return (
    <form>
      <div className="mb-3">

        <label for="Name" className="form-label">Name</label>
        <input type="text" className="form-control" name="name" value={name} onChange={(e) => setName(e.target.value)} />
      </div>

      <div className="mb-3">
        <label for="title" className="form-label">Title</label>
        <input type="text" className="form-control" name="title" value={title} onChange={(e) => setTitle(e.target.value)} />
      </div>
      <div className="mb-3">
        <label for="price" className="form-label">Price</label>
        <input type="number" className="form-control" name="price" value={price} onChange={(e) => setPrice(e.target.value)} />
      </div>
      <div class="mb-3">
        <label for="upload" class="form-label">Upload</label>

        <input class="form-control" type="file" name="upload" onChange={(e) => setUpload(e.target.files[0])} />
      </div>

      <button type="submit" className="btn btn-primary" onClick={AddInfo}>Submit</button>
    </form>
  )
}

export default CompanyForm;

此外，表单中的其他数据已成功转发到后端，但图像字段为空白意味着没有图像

Answer 1

需要修改headers值

从 'Content-Type': 'application/x-www-form-urlencoded' 到

headers: {
   'Content-Type': 'multipart/form-data'
}

全变可以

import React, { useState } from "react";
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

function CompanyForm() {
  const [name, setName] = useState("");
  const [title, setTitle] = useState("");
  const [price, setPrice] = useState("");
  const [upload, setUpload] = useState(null);

  const navigate = useNavigate();

  const AddInfo = async () => {
    let formField = new FormData()

    formField.append('name', name)
    formField.append('title', title)
    formField.append('price', price)
    formField.append('upload', upload)

    if (upload !== null) {
      formField.append('upload', upload)
    }


    const AddInfo = () => {
      const formField = new FormData()
      formField.append('name', name)
      formField.append('title', title)
      formField.append('price', price)
      formField.append('upload', upload)

    }

    await axios({
      method: 'POST',
      url: 'http://localhost:8000/',
      data: formField,

      headers: {
        'Content-Type': 'multipart/form-data'
      },

    }).then((res) => {
      console.log(res.data)
      navigate('/')
    })

  }


  return (
    <form>
      <div className="mb-3">

        <label for="Name" className="form-label">Name</label>
        <input type="text" className="form-control" name="name" value={name} onChange={(e) => setName(e.target.value)} />
      </div>

      <div className="mb-3">
        <label for="title" className="form-label">Title</label>
        <input type="text" className="form-control" name="title" value={title} onChange={(e) => setTitle(e.target.value)} />
      </div>
      <div className="mb-3">
        <label for="price" className="form-label">Price</label>
        <input type="number" className="form-control" name="price" value={price} onChange={(e) => setPrice(e.target.value)} />
      </div>
      <div class="mb-3">
        <label for="upload" class="form-label">Upload</label>

        <input class="form-control" type="file" name="upload" onChange={(e) => setUpload(e.target.files[0])} />
      </div>

      <button type="submit" className="btn btn-primary" onClick={AddInfo}>Submit</button>
    </form>
  )
}

export default CompanyForm;