Question

我有一个反应前端和一个Rails后端。我正在使用paperclip gem和aws-sdk gem将图像上传到我的应用程序。整个想法是用户可以上传评论，并且在评论中可以有附件。我想也许我发送我的后端错误的数据，因为它不起作用....在前端我使用文件阅读器制作文件对象并发送我的rails应用程序文件对象 - 但它不似乎在认识它。如果我希望我的rails后端能够识别这个图像附件，那么在我将它发送到我的rails应用程序之前，应该如何在我的前端格式化图像？

这就是我的文件对象存储在状态中的方式 - 当然是在handleChange上：

 handleFileChange = (e) => {
  debugger

 e.preventDefault();

  let reader = new FileReader();
  let file = e.target.files[0];

  reader.onloadend = () => {
    this.setState({
      file: file,
      imagePreviewUrl: reader.result
    });
  }
  reader.readAsDataURL(file)
}

然后当我提交表单时，我使用一个回调函数，最终将该文件对象发送到我的适配器，该适配器调用rails后端，如下所示：

  static addComment(comment, project_id, datetime, clientView, file) {
   debugger
   return fetch(path,{
     method: 'POST',
     headers: headers(),
     body: JSON.stringify({
       client_view: clientView,
       comment_text: comment,
       project_id: project_id,
       currenttime: datetime,
       commentasset: file
     })
   })
   .then( resp => resp.json())
 }

所以我发送我的rails在parame中的文件对象是commentasset ...但当我在我的rails端点击我的byebug并检查

params[:commentasset]

它似乎是空白的。为什么不发回我的文件对象？

Answer 1

您正在发送包含该文件作为正文的JSON请求。请尝试使用FormData发送请求：

static addComment(comment, project_id, datetime, clientView, file) {
   debugger
   const body = FormData.new();
   body.append('client_view', clientView);
   body.append('comment_text', comment);
   body.append('project_id', project_id);
   body.append('currenttime', datetime);
   body.append('commentasset', file);

   return fetch(path,{
     method: 'POST',
     headers: headers(),
     body: body
   })
   .then( resp => resp.json())
 }

使用React和Rails上传图像 - Paperclip和AWS S3存储桶

1 个答案: