ruby-on-rails - Ruby on Rails : Dropzone js, 正在获取 [object Object]，但为什么呢？

Question

我的缩略图上出现了 [object Object](背景图像是您可以点击上传照片的区域...我不确定如何加载类似于 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/

---

编辑

根据评论请求发布 Controller

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 中，您不能在不使用表单的情况下发布数据。 Rails 验证每个请求的 CSRF token ，除非 token_authentication 被关闭。在您的代码中，您使用 div ID 初始化了 dropzone。所以服务器无法验证您的真实性 token 。

The ApplicationController called protect_from_forgery, as appropriate. All of the controllers inherited from ApplicationController, and it appeared that there were no CSRF vulnerabilities. Through dynamic analysis, however, I discovered that the application was, in fact, vulnerable to 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;
                });
             }
        });