js.erb 只渲染 ruby 代码，不渲染 js

Question

编辑：我自己解决了这个问题 - 见下文

我有一个表格，我可以使用我的 projects_controller.rb 中包含的 add_picture_to_project_path 路由上传图像。此方法在模型中执行文件上传，然后将一些 Json 返回到我的控制器。完成后，我想渲染 add_picture_to_project.js.erb 文件，但出现以下问题。只有 ruby 代码有效，javascript 根本没有响应。

routes.rb

patch '/addLocalPicture', to: 'projects#add_picture_to_project', as: :add_picture_to_project

show.html.haml

= bootstrap_form_tag(url: add_picture_to_project_path,method: :patch, html: { :multipart => true }) do |f|
      .form-group    
        %input{type:'file', multiple: true, name:"picture", id:"fileupload"}
        = hidden_field_tag 'stock_id', "5da481f45d5f4443c644f89f"
        = hidden_field_tag 'project_id', @project._id
        = hidden_field_tag 'company_id', @company._id
        = f.submit("Valider", class: 'simple-btn')

projects_controller.rb

       def add_picture_to_project
       picture_params = {
                stock_id: params[:stock_id],
                project_id: params[:project_id],
                company_id: params[:company_id],
            }
       @picture = Picture.upload_picture(params[:picture], picture_params, bearer_token)

型号：picture.rb

def self.upload_picture tempfile, picture_params, bearer_token
        params = {
                "photoUploadS3" => UploadIO.new(File.open(tempfile.path), MIME::Types.type_for(tempfile.path), File.basename(tempfile.path)), 
                "stock_id" => picture_params[:stock_id], 
                "project_id" => picture_params[:project_id], 
                "company_id" => picture_params[:company_id], 
                "filename" => File.basename(tempfile.path), 
                "size" => File.size(tempfile.path)
            } 

        # Create the HTTP objects
        uri = URI("#{ENV['API_HOST']}/pictures/addLocalPicture")                       
        req = Net::HTTP::Post::Multipart.new uri.path, params

        req.add_field("Authorization", "Bearer #{bearer_token}") #add to Headers
        res = Net::HTTP.start(uri.hostname, uri.port) do |http|
            res = http.request(req)
            response =  eval(encode_utf8(res.body))                  
            return response.to_struct       
        end                                               
    end

这是渲染 add_picture_to_project.js.erb，它只执行 ruby 内容...可能是因为文件名？

add_picture_to_project.js.erb

console.log("hello");
<%= say "hello #{@picture}" %>

在我的终端中我得到

Rendering projects/add_picture_to_project.js.erb
 ______________________________________ 
/ "hello #<OpenStruct                  \
| stock_id=\"5da43c644f89f\ |
| ",                                   |
| project_id=\"5da0c75300c |
| a\",                                 |
| company_id=\"5caddb3d127 |
| 3\",                                 |
| filename=\"RackMultipart20191105-536 |
| 84-1um4lsk.jpg\", size=412324,       |
| unique_filename=\"ff3f2720-001a-11ea |
| -8828-01b6885e7183-RackMultipart2019 |
| 1105-53684-1um4lsk.jpg\",            |
| created_at=\"2019-11-05T22:24:13.926 |
| Z\",                                 |
| updated_at=\"2019-11-05T22:24:13.926 |
| Z\", status=1,                       |
| user_id=\"5d9f3817602ef027\" |
| ,                                    |
| projects=[\"5300ca |
\ \"]>"                                /
 -------------------------------------- 

  Rendered projects/add_picture_to_project.js.erb

我应该更改什么才能执行我的 javascript？

答案： 我的问题出在 picture.js 文件中 - 我将我的数据类型设置为 Json 而它应该是 'script'。这解决了我的问题。我在这里留下我的问题，以便人们可以了解更多关于如何使用 jquery 文件上传器设置 net http 分段文件上传的信息。

    $('#fileupload').fileupload({
        dataType: 'script',
        done: function (e, data) {
            console.log(data);
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });

Answer 1

您需要确保您的控制器操作包含一个 respond_to 块，让应用知道如何处理请求格式：

def add_picture_to_project
  picture_params = {
    stock_id: params[:stock_id],
    project_id: params[:project_id],
    company_id: params[:company_id],
   }
  @picture = Picture.upload_picture(params[:picture], picture_params, bearer_token)

  respond_to do |format|
    format.js
  end
end

Answer 2

答案： 我的问题出在 picture.js 文件中 - 我将我的数据类型设置为 Json 而它应该是 'script'。这解决了我的问题。我在这里留下我的问题，以便人们可以获得更多关于如何使用 jquery 文件上传器设置 net http 多部分文件上传的信息。

    $('#fileupload').fileupload({
        dataType: 'script',
        done: function (e, data) {
            console.log(data);
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });

js.erb 只渲染 ruby 代码，不渲染 js

js.erb rendering only the ruby code, not the js

javascript

ruby-on-rails

multipartform-data

multipart

net-http