Question

我遇到了一个问题，在注册屏幕上，我允许用户上传avatar，在后端，我直接上传到S3。

但每次上传后我都会

未捕获的SyntaxError：意外的标记＆lt;

我不知道我在这里做错了什么！请指教。

环境信息：

ruby '2.5.0'
gem 'devise', '~> 4.4'
gem 'rails', '~> 5.1.4'
gem 's3_direct_upload', git: 'https://github.com/waynehoover/s3_direct_upload.git', branch: 'master'
gem 'fog-aws'

我可以在S3上传文件 - YES
我可以看到进度条 - YES
代码应在隐藏字段中设置值 - NOT HAPPENING
我应该在avatar-container - NO HAPPENING

以下是我的代码

（1）查看：app/views/devise/registrations/new.html.erb

<div class="field">
  <%= f.hidden_field :avatar %>
  <%= s3_uploader_form callback_url: s3_upload_index_path, callback_method: "POST", callback_param: "model[image_url]", id: "s3-uploader" do %>
    <%= file_field_tag :file, multiple: false, data: { url: s3_uploader_url } %>
  <% end %>

  <div class="avatar_container" id="avatar-container"></div>
  <script id="template-upload" type="text/x-tmpl">
    <div id="file-{%=o.unique_id%}" class="upload">
      {%=o.name%}
      <div class="progress"><div class="bar" style="width: 0%"></div></div>
    </div>
  </script>

  <div class="js-progress-bars-image"></div>
</div>

（2）JS：/app/assets/javascript/signup.js

s3_direct_upload = {
  init: function() {
    return this.image_s3_bind();
  },
  image_s3_bind: function() {
    $('#s3-uploader').S3Uploader({
      progress_bar_target: $('.js-progress-bars-image'),
      allow_multiple_files: false,
      before_add: function(file) {
        var type_reg;
        type_reg = /^image\/(jpg|png|jpeg|bmp|gif|ico)$/;
        if (type_reg.test(file.type)) {
          return true;
        } else {
          alert('This file type is unsupported.');
          return false;
        }
      }
    });
    $('#s3-uploader').bind('s3_upload_failed', function(e, content) {
      alert(content.filename + ' failed to upload with error: ' + content.error_thrown);
    });
  }
};

$(document).on('turbolinks:load', function() {
  $('#user_company_name').autocomplete({
    source: $('#user_company_name').data('autocomplete-source')
  });
  s3_direct_upload.init();
});

（3）主要js：/app/assets/javascripts/application.js

//= require jquery3
//= require jquery_ujs
//= require jquery-ui/widgets/autocomplete
//= require turbolinks
//= require popper
//= require bootstrap
//= require s3_direct_upload
//= require_tree .

（4）控制器：/app/controllers/s3_upload_controller.rb

class S3UploadController < ApplicationController
  def create
    @media_url = params[:url] rescue nil
  end
end

（5）查看：/app/views/s3_upload/create.js.erb

$("input#user_avatar").val('<%= @media_url.html_safe %>');
$("div#avatar-container").html('<%= j image_tag(@media_url.html_safe) %>');
alert("Uploaded successfully");

错误输出

Uncaught SyntaxError: Unexpected token <
  at DOMEval (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:83)
  at Function.globalEval (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:347)
  at text script (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:9607)
  at ajaxConvert (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:8755)
  at done (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:9223)
  at XMLHttpRequest.<anonymous> (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:9515)

任何帮助都将受到高度赞赏

Answer 1

逃离javascript。它正在读取ruby标签的<

$("input#user_avatar").val('<%= j @media_url.html_safe %>');

Rails和S3直接上传 - 未捕获的SyntaxError：意外的令牌

1 个答案: