如何解决使用载波
我正在使用Rails 5.2和Trix构建博客引擎。我可以完美显示所见即所得的编辑器,但是尝试上传图像时遇到了很多问题。我已经看过Go Rails教程,但是它不适合Carrier Wave。我能够成功发布信息,但是当我添加图像并发布信息时,图像消失了。
class CreatePosts < ActiveRecord::Migration[5.2]
def change
create_table :posts do |t|
t.string :title
t.text :body
t.references :user
t.timestamps
end
end
end
我的Photos
列是单独的:
class AddPhotosToPosts < ActiveRecord::Migration[5.2]
def change
add_column :posts,:photos,:json
end
end
这是我创建帖子的实际形式:
<%= form_with(model: post,local: true) do |form| %>
<div class="actions">
<div class="form-field">
<%= form.text_field :title %>
</div>
<div class="form-field">
<trix-editor input="post_body"></trix-editor>
<p>
<%= form.label :photos %>
<%= form.file_field :photos %>
</p>
</div>
<%= form.submit %>
</div>
<% end %>
在我的Post.rb
模型上,我添加了mount_uploaders :photos,PhotoUploader
多个,因为我希望基于载波文档,允许人们上传多张图像。
这是我的uploading_images.js
位于javascript文件夹中:
(function() {
var host,uploadAttachment;
document.addEventListener("trix-attachment-add",function(event) {
var attachment;
attachment = event.attachment;
if (attachment.file) {
return uploadAttachment(attachment);
}
});
host = "/photos";
uploadAttachment = function(attachment) {
var file,form,xhr;
file = attachment.file;
form = new FormData;
form.append("Content-Type",file.type);
form.append("image[image]",file);
xhr = new XMLHttpRequest;
xhr.open("POST",host,true);
xhr.upload.onprogress = function(event) {
var progress;
progress = event.loaded / event.total * 100;
return attachment.setUploadProgress(progress);
};
xhr.onload = function() {
var href,url;
url = href = JSON.parse(this.responseText).url;
return attachment.setAttributes({
url: url,href: href
});
};
return xhr.send(form);
};
}).call(this);
(上面的代码来自StackOverflow上的另一篇文章,我认为它可以正常工作,但我想我缺少一些东西)
那么,我需要分别使用“照片”控制器和模型吗?如果是这样,我该怎么做?我在前端方面很糟糕,因此,感谢您的帮助!
解决方法
虽然我花了一段时间,但我必须解决几个问题,我才为实现@theKid工作。如果您希望每个帖子有多张照片,则需要像Chris一样创建一个照片支架。
您应该几乎可以完全按照他的教程进行操作,只不过您需要一个Carrierwave初始化程序,并且您的Photo
模型看起来像这样:
class Photo < ApplicationRecord
mount_uploader :image,FileUploader
end
如有任何问题,请随时添加更多评论。关于Trix,JavaScript,XHR请求,Rails和Carrierwave的事情很多,所以我最好的建议是隔离每个步骤,以便您可以明确调试任何问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。