使用载波

问题描述

我正在使用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上的另一篇文章,我认为它可以正常工作,但我想我缺少一些东西)

那么,我需要分别使用“照片”控制器和模型吗?如果是这样,我该怎么做?我在前端方面很糟糕,因此,感谢您的帮助!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)