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/ 

---

編輯

根據註釋requets發帖控制器

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你不能在不使用表單POST數據。除非token_authentication已關閉，否則Rails將驗證每個請求的CSRF令牌。在您的代碼中，您使用div ID初始化了dropzone。所以服務器無法驗證您的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; 
       }); 
      } 
     });