使用 Axios 将文件和数据发送到服务器

Question

我正在使用 ReactJs 并想通过 Axios 将数据发送到 Laravel API。

我试试

export const send = (data, File) => {
  const formData = new FormData();
  formData.append('media', File);
  try {
    PostRequest.post('/post', { formData, data })
      .then(r => console.log(r.data))
      .catch(e => console.log(e));
  } catch (error) {
    console.log(error);
  }
};

我这样调用 send ：

let data = {
  mobile: mobile,
  email: emailAddress,
  userName: userName,
  password: password,
  firstName: firstName,
  lastName: lastName,
  website: website,
  bio: bio,
  date: selectedDay,
  code: code,
};
console.log(profile);
console.log(data);
send(data, profile);

日志

但响应中的表单数据为空

我这样设置标题：

headers: {
  "Content-Type": "multipart/form-data",
  "Accept":"application/json"
}

我也试试

const formData = new FormData();
formData.append('media', profile);
let data = {
  mobile: mobile,
  email: emailAddress,
  userName: userName,
  password: password,
  firstName: firstName,
  lastName: lastName,
  website: website,
  bio: bio,
  date: selectedDay,
  code: code,
  media: formData,
};
send(data);

但媒体为空

Answer 1

问题根本不在于您的实施。您不能在控制台中记录 formData 并期望将其实体视为其他对象。

因此，控制台上的空formData 是正确的行为。如果你真的想检查你的formData，看看这个post。

因此，您的 send 方法工作正常，并将正确的数据发送到服务器。

可选

在服务端，需要获取formData并解析，所以必须在服务端实现。由于您需要在formData 中获取正文请求，您可以在formData 中附加所有data 并发送单个formData，但它取决于后端实现，如果你能改变服务器端，我鼓励你把你所有的数据附加到formData然后发送出去。

Answer 2

你可以有一个这样的上传器，它可以与;)

 const Uploader = ({ url, updateData }) => {
function handleUpload(e) {
if (e.target.files[0]) {
  console.log(e.target.files);
  const formData = new FormData();
  formData.append("config", e.target.files[0], e.target.files[0].name);
  console.log(formData);
  axios.post(url, formData).then(res => {
    updateData(res);
  });
}
}
return (
<label>
  <div className={styles.uploaderBtn}>
    <input
      type="file"
      style={{ display: "none" }}
      onChange={e => {
        handleUpload(e);
      }}></input>
    <img src={Upload} alt="" />
  </div>
</label>
);
};