多部分/表单数据不适用于 axios put 请求

Question

我现在正在尝试在我的项目上创建带有文件上传的增删改查功能。我已经完成了创建部分，自从我new FormData()通过附加文件值并post使用 headers 从 axios 发送请求来实现该部分以来，一切都工作正常'Content-Type': 'multipart/form-data'。

但是，如果我传入'Content-Type': 'multipart/form-data'标头，axios 会发送一个空正文。如果我删除它，它会发送实际的对象，但不发送上传的文件。我正在使用 Laravel 后端在 NextJs 上实现此功能。

这是代码

      const formData = new FormData();
      formData.append('first_name', values.first_name);
      formData.append('last_name', values.last_name);
      formData.append('phone_no', values.phone_no);
      formData.append('profile_picture', values.profile_picture, 'bermuda.png');
      formData.append('password', values.password);

      await axios
        .put(`/api/v1/users/${user.member_no}`, formData, 
         {
           headers: {'Content-Type': 'multipart/form-data'}
         })
        .then((res) => {
          console.log(res.data);
          if (res.status === 201) {
            toast.success('Member updated successfully.');

            refreshUser(); // mutating the swr request
          }
        })
        .catch((err) => {
          toast.error(err.response.data.message);
        });

      setLoading(false);
    },

console.log(res.data)如果我传递 multipart/form-data，则从 axios 返回 []；如果我删除它但没有上传的文件，则它返回整个值对象。

Answer 1

这似乎是 Laravel 项目中常见的反复出现的问题。不确定它是否是由 Axios 或 Laravel 本身引起的，但与此同时，以下解决方法有效：

不要发送实际的 HTTP PUT 请求，而是发送一个 HTTP POST 请求，并在 formData 中指定一个参数，_method并将其值设置为put。这是 Laravel 中称为方法欺骗的功能。

将该字段添加到您的 formData 中，您的代码将如下所示：

      const formData = new FormData();
      formData.append('_method', 'put');
      formData.append('first_name', values.first_name);
      formData.append('last_name', values.last_name);
      formData.append('phone_no', values.phone_no);
      formData.append('profile_picture', values.profile_picture, 'bermuda.png');
      formData.append('password', values.password);

      await axios
        .post(`/api/v1/users/${user.member_no}`, formData, 
         {
           headers: {'Content-Type': 'multipart/form-data'}
         })
        .then((res) => {
          console.log(res.data);
          if (res.status === 201) {
            toast.success('Member updated successfully.');

            refreshUser(); // mutating the swr request
          }
        })
        .catch((err) => {
          toast.error(err.response.data.message);
        });

      setLoading(false);
    },