Ruby on Rails:Dropzone js,获取[object Object],但为什么呢？

Question

我的缩略图上有[对象对象](背景图片是您可以点击上传照片的区域...我不知道如何加载类似于http://中示例的普通框www.dropzonejs.com/)

视图

<%= simple_form_for @project do |f| %>

  <div class="dropzone dz-clickable dz-square" id="mydrop">
    <div class="dz-default dz-message" data-dz-message=""></div>
    <div id="bi_previews"></div>
    <div class="fallback">
      <%= f.file_field :beautiful_image %></div>
    </div>
  </div>

<% end %>

CoffeeScript的

$(document).on 'ready page:load', ->
  Dropzone.autoDiscover = false
  $('div#mydrop').dropzone 
    url: '/projects'
    previewsContainer: "#bi_previews"
    headers: "X-CSRF-Token" : $('meta[name="csrf-token"]').attr('content')
    paramName: "project[beautiful_image]"
    init: ->
      @on 'success', (file, json) ->
      @on 'addedfile', (file) ->
      @on 'drop', (file) ->
        alert 'file'
        return
      return

的routes.rb

Rails.application.routes.draw do
  devise_for :users
  resources :projects

调节器

def project_params
  params.require(:project).permit(
    :user_id, :beautiful_image, :title_name, :remove_project_images_files, project_images_files: [],
    project_images_attributes: [:id, :project_id, :photo, :_destroy]).merge(user_id: current_user.id)
end

模型

has_attached_file :beautiful_image, :styles => { :large => "800x800>", :medium => "500x500>", :thumb => "150x150#" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :beautiful_image, content_type: /\Aimage\/.*\Z/

---

编辑

每个评论的发布控制器请求

def new
  @project = Project.new
  @gear = Gear.new
  @project.gears.build
  @project.project_images.build
end

def edit
  @project = Project.find(params[:id])
end

def create
  @project = Project.new(project_params)

  respond_to do |format|
    if @project.save
      format.html { redirect_to @project, notice: 'Project was successfully created.' }
      format.json { render :show, status: :created, location: @project }
    else
      format.html { render :new }
      format.json { render json: @project.errors, status: :unprocessable_entity }
    end
  end
end

Answer 1

在Rails中如果不使用表单,则无法发布数据.除非token_authentication关闭,否则Rails会为每个请求验证CSRF令牌.在您的代码中,您dropzone使用了初始化div ID.所以服务器无法验证你的authenticity token.

ApplicationController根据需要调用protect_from_forgery.所有控制器都继承自ApplicationController,似乎没有CSRF漏洞.但是,通过动态分析,我发现该应用程序实际上容易受到CSRF的攻击.

所以使用表单的id初始化你的dropzone.

HTML代码

<%= simple_form_for @project, class: 'dropzone', id: 'project-form' do |f| %>
            <div class="fallback">
              <%= f.file_field :beautiful_image, multiple: true %>
            </div>
 <% end %>

你的Javascript应该是这样的

   var objDropZone;
   Dropzone.autoDiscover = false;
   $("#project-form").dropzone({
            acceptedFiles: '.jpeg,.jpg,.png',
            maxFilesize: 5, //In MB
            maxFiles: 5,
            addRemoveLinks: true,
            removedfile: function (file) {
                if (file.xhr.responseText.length > 0) {
                    var fileId = JSON.parse(file.xhr.responseText).id;
                        $.ajax({
                        url: '/projects/' + fileId,
                        method: 'DELETE',
                        dataType: "json",
                        success: function (result) {
                           console.log('file deleted successfully');
                            var _ref;
                            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

                        },
                        error: function () {
                          console.log('error occured while deleteing files');
                        }

                    });
                }

            },
            init: function () {
                objDropZone = this;

                this.on("success", function (file, message) {
                    console.log('file uploaded successfully')
                });

                this.on("error", function (file, message) {
                    var _ref;
                    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
                });
             }
        });