使用Active Storage和JSON手动上载
使用Active Storage和JSON手动上载
提问于 2018-09-28 02:53:07
我正在尝试为我的Rails应用程序的所有文件和图像做一个通用的文件上传器。uploader功能类似于流行的JS上传工具，如Filestack或Uppy Uploader，用户只需在浏览器上选择任何文件，然后应用程序将处理该文件，并在上传后返回文件的URL。现在，有了这个URL，我们就可以将它附加到任何表单/所见即所得编辑器/任何我们喜欢的地方，例如聊天消息等。
为此，我的方法是使用Rails Active Storage进行手动上传。
因此，首先，我创建了一个名为Uploader的类，它链接到Rails活动存储：
app/models/uploader.rb
class Uploader < ApplicationRecord
has_one_attached :file
end然后，我使用名为"file“的操作为这个Uploader创建了一个控制器，其中所有文件都将被处理：
config/routes.rb
post 'uploaders/file' => 'uploaders#file'app/controllers/uploaders_controller.rb
def file
blob = ActiveStorage::Blob.create_after_upload!(
io: params[:uploader][:file],
filename: params[:uploader][:file].original_filename,
content_type: params[:uploader][:file].content_type
)
@filelink = url_for(blob)
respond_to do |format|
format.html { redirect_back(fallback_location: root_path) }
format.js
end
end最后，这是这个Uploader的视图：
app/views/new.html.erb
<h3>Select Files To Upload</h3>
<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true do |f| %>
<%= f.file_field :file, direct_upload: true, class: "form-control" %>
<%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
Save
<% end %>
<% end %>问题
因此，我的问题是，如何在上述代码中使用JSON，以便获取上传的文件URL？
首先，我将上面的代码更改为以下代码：
app/controllers/uploaders_controller.rb
def file
blob = ActiveStorage::Blob.create_after_upload!(
io: params[:uploader][:file],
filename: params[:uploader][:file].original_filename,
content_type: params[:uploader][:file].content_type
)
render json: { filelink: url_for(blob) }
endapp/views/new.html.erb
<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true, :html => {:'data-type' => 'json', :multipart => true} do |f| %>
<%= f.file_field :file, direct_upload: true, class: "form-control" %>
<%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
Save
<% end %>
<% end %>
<script type="text/javascript">
$("#submit-uploader").click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
dataType: "script",
url: $(this).parents("form").attr("action"),
contentType: 'application/json',
data: JSON.stringify({ file: $("#uploader_file"), _method: 'post' })
}).done(function( data ){
console.log(data);
});
});
</script>现在，我使用javascript通过JSON提交活动存储表单。但很明显，由于脚本目前不处理任何活动存储，因此缺少了一些东西。那么，我如何解决这个问题呢？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-28 03:28:47
你可以用ajax发送文件，这是一个示例
<%= form_tag uploaders_file_path(@uploader), :html => {:multipart => true} do |f| %>
<%= f.file_field :file, direct_upload: true, class: "form-control" %>
<%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
Save
<% end %>
<% end %>
<script type="text/javascript">
// trigger the form submit
$("form").submit(function(evt){
evt.preventDefault();
// get the input with file
var formData = new FormData($(this)[0]);
$.ajax({
url: "<%= uploaders_file_path(@uploader) %>",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
})
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52543434
复制相关文章
相似问题
腾讯云开发者
