Rails使用aws-sdk gem和heroku上的jQuery-File-Upload直接进入S3上传

前端之家收集整理的这篇文章主要介绍了Rails使用aws-sdk gem和heroku上的jQuery-File-Upload直接进入S3上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试使用jQuery-File-Uploadaws-sdk gem以及遵循heroku’s direct to S3 upload指令直接在Rails中上传到Amazon S3.这是在html中生成上传表单:

这是相应的jQuery:

  1. $(function() {
  2. $('.directUpload').find("input:file").each(function(i,elem) {
  3. var fileInput = $(elem);
  4. var form = $(fileInput.parents('form:first'));
  5. var submitButton = form.find('input[type="submit"]');
  6. var progressBar = $("

尝试上传文件生成以下日志:

  1. Started POST "/users/bazley/update_pictures" for ::1 at 2016-01-01 21:26:59 +0000 Processing by CharactersController#update_pictures as HTML
  2. Parameters: {
  3. "utf8"=>"✓","authenticity_token"=>"rvhu...fhdg==","standardpicture"=>{
  4. "picture"=>#

表单提交成功,但它无法正常工作,因为Rails没有在S3上保存正确的位置(“图片”,字符串);相反,它认为位置是

  1. "picture"=>#

您可以在提交的参数中看到这一点.它应该是这样的:

  1. "picture"=>"//websmash.s3.amazonaws.com/uploads/220f5378-1e0f-4823-9527-3d1170089a49/europe.jpg"},"commit"=>"Upload pictures"}

我不明白的是,当表格中出现所有正确的信息时,为什么它会导致参数错误.它明确地说

  1. data-url="https://websmash.s3.amazonaws.com"

在表单中,jQuery包括

  1. url: form.data('url'),

出了什么问题?

为了完整性:在控制器中:

  1. before_action :set_s3_direct_post
  2. .
  3. .
  4. def set_s3_direct_post
  5. @s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}",success_action_status: '201',acl: 'public-read')
  6. end

表格:

  1. <%= form_for :standardpicture,url: update_pictures_user_path,html: { id: "pic-upload",class: "directUpload",data: { 'form-data' => (@s3_direct_post.fields),'url' => @s3_direct_post.url,'host' => URI.parse(@s3_direct_post.url).host }
  2. } do |f| %>

aws.rb初始化器:

  1. Aws.config.update({
  2. region: 'us-east-1',credentials: Aws::Credentials.new(ENV['AWS_ACCESS_KEY_ID'],ENV['AWS_SECRET_ACCESS_KEY']),})
  3. S3_BUCKET = Aws::S3::Resource.new.bucket(ENV['S3_BUCKET'])

编辑

控制台显示此错误:

  1. Uncaught TypeError: Cannot read property 'innerHTML' of null

在这个文件里面(tmpl.self-c210 … 9488.js?body = 1):

  1. (function ($) {
  2. "use strict";
  3. var tmpl = function (str,data) {
  4. var f = !/[^\w\-\.:]/.test(str) ? tmpl.cache[str] = tmpl.cache[str] ||
  5. tmpl(tmpl.load(str)) :
  6. new Function(
  7. tmpl.arg + ',tmpl',"var _e=tmpl.encode" + tmpl.helper + ",_s='" +
  8. str.replace(tmpl.regexp,tmpl.func) +
  9. "';return _s;"
  10. );
  11. return data ? f(data,tmpl) : function (data) {
  12. return f(data,tmpl);
  13. };
  14. };
  15. tmpl.cache = {};
  16. tmpl.load = function (id) {
  17. return document.getElementById(id).innerHTML;
  18. };
  19. tmpl.regexp = /([\s'\\])(?!(?:[^{]|\{(?!%))*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g;
  20. tmpl.func = function (s,p1,p2,p3,p4,p5) {
  21. if (p1) { // whitespace,quote and backspace in HTML context
  22. return {
  23. "\n": "\\n","\r": "\\r","\t": "\\t"," " : " "
  24. }[p1] || "\\" + p1;
  25. }
  26. if (p2) { // interpolation: {%=prop%},or unescaped: {%#prop%}
  27. if (p2 === "=") {
  28. return "'+_e(" + p3 + ")+'";
  29. }
  30. return "'+(" + p3 + "==null?'':" + p3 + ")+'";
  31. }
  32. if (p4) { // evaluation start tag: {%
  33. return "';";
  34. }
  35. if (p5) { // evaluation end tag: %}
  36. return "_s+='";
  37. }
  38. };
  39. tmpl.encReg = /[<>&"'\x00]/g;
  40. tmpl.encMap = {
  41. "<" : "&lt;",">" : "&gt;","&" : "&amp;","\"" : "&quot;","'" : "&#39;"
  42. };
  43. tmpl.encode = function (s) {
  44. /*jshint eqnull:true */
  45. return (s == null ? "" : "" + s).replace(
  46. tmpl.encReg,function (c) {
  47. return tmpl.encMap[c] || "";
  48. }
  49. );
  50. };
  51. tmpl.arg = "o";
  52. tmpl.helper = ",print=function(s,e){_s+=e?(s==null?'':s):_e(s);}" +
  53. ",include=function(s,d){_s+=tmpl(s,d);}";
  54. if (typeof define === "function" && define.amd) {
  55. define(function () {
  56. return tmpl;
  57. });
  58. } else {
  59. $.tmpl = tmpl;
  60. }
  61. }(this));
最佳答案
终于找到了答案here.只需要去application.js并进行更改

  1. //= require jquery-fileupload

  1. //= require jquery-fileupload/basic

基督在串联.在获得更多2个视图时,只有50个重复点.

猜你在找的jQuery相关文章