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

I have a react frontend and a Rails backend. I am using the paperclip gem and aws-sdk gem in order to upload images to my app. The whole idea is that a user can upload a comment and in that comment there can be an attachment. I think maybe I am sending my backend the wrong data though because it is not working.... On the frontend i'm using file reader to make a file object and sending my rails app the file object -- but it doesn't seem to be recognizing it. If i want my rails backend to recognize this image attachment, how should the image be formatted in my frontend before i send it to my rails app?

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

This is how my file object is stored in the state -- on handleChange of course:

这就是我的文件对象存储在状态中的方式 - 当然是在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)
}

then when i submit the form i use a callback that eventually sends that file object to my adapter which makes the call to the rails backend as sseen below:

然后,当我提交表单时,我使用一个回调,最终将该文件对象发送到我的适配器,这使得对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())
 }

so im sending my rails the file object in the param that is commentasset... but when i hit my byebug on my rails end and check

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

params[:commentasset] 

it appears to be blank. Why isnt it sending back my file object?

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

1 个解决方案

#1

You're sending a request with JSON including the file as body. Try to send request using FormData instead:

您正在发送包含该文件作为正文的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())
 }