使用载波

如何解决使用载波

我正在使用Rails 5.2和Trix构建博客引擎。我可以完美显示所见即所得的编辑器,但是尝试上传图像时遇到了很多问题。我已经看过Go Rails教程,但是它不适合Carrier Wave。我能够成功发布信息,但是当我添加图像并发布信息时,图像消失了。

所以我有一个简单的Post表,如下所示:

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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?