使用 React 和 Rails 上传图像 - 回形针和 AWS S3 存储桶

Question

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

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

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 发送了作为注释资产的参数中的文件对象......但是当我在我的轨道端遇到我的 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())
}