如何使用 axios 将文件数据正确上传到 rails 5 后端

Posted 2023-02-15

【中文标题】如何使用 axios 将文件数据正确上传到 rails 5 后端

【英文标题】：How to correctly upload file data using axios to rails 5 backend

【发布时间】：2022-01-05 11:09:03

【问题描述】：

我希望用户能够在我的项目上上传照片并将其添加到他们的个人资料中。我想我可能做错了 axios 调用，因为我已经尝试根据其他堆栈溢出答案的混合来弄清楚如何做到这一点。

这里是小表单的 onSubmit 处理程序：

  const handleSubmit = (e) => 
    e.preventDefault();
    const user =  user: avatarUser ;
    const formData = new FormData();
    formData.append('user[profpic]', file)
    formData.append('_method', 'PATCH')
    user.user.profpic = formData;
    addFileToProfile(user).then(closeModal());
  ;

这是 axios 调用：

export const addFileToProfile = (user) =>
  axios
    .post(`/api/users/$user.user.id`, user, 
      headers:  'Content-Type': 'multipart/form-data' ,
    )

控制器非常标准，我使用强参数，所以我将数据嵌套在user 的键下。我一直在使用路由成功地创建和修补用户，所以我认为控制器不是问题。为了以防万一，我会发布更新操作，但它适用于除此之外的其他事情：

  def update
    @user = User.find(params[:id])
    if @user.update(user_params)
      render "api/users/show"
    else
      render json: @user.errors.full_messages, status: 422
    end
  end

我的服务器日志非常可疑；由于某种原因，我使用 axios 发送的内容似乎触发了 GET 请求：

Started POST "/api/users/5" for ::1 at 2021-11-27 22:24:06 -0500
Started GET "/[object%20FormData]" for ::1 at 2021-11-27 22:24:06 -0500

就是这样。我希望比我更有经验的人能够解释那里的日志并找出我做错了什么。

【参考方案1】：

看起来问题主要在于handleSubmit 函数中的嵌套过多。我建议让它更简单，只传递 ID 和 formData。我还在 axios 调用中添加了另一个标头。它现在按预期工作！

const handleSubmit = (e) => 
  e.preventDefault();
  const formData = new FormData();
  formData.append(`user[$photoType]`, file)
  const user =  data: formData, id: avatarUser.id ;
  upload(user).then(closeModal());
;

export const addFileToProfile = (user) => (
  axios
    .patch(`/api/users/$user.id`, user.data, 
      headers:  "Content-Type": "multipart/form-data", processData: "false" ,
    )
    .then((res) => res.data)
)