我正在尝试使用jQuery-File-Upload和aws-sdk gem以及遵循heroku’s direct to S3 upload指令直接在Rails中上传到Amazon S3.这是在html中生成的上传表单：
这是相应的jQuery：
$(function() {
$('.directUpload').find("input:file").each(function(i,elem) {
var fileInput = $(elem);
var form = $(fileInput.parents('form:first'));
var submitButton = form.find('input[type="submit"]');
var progressBar = $("Failed");
}
});
});
});
Started POST "/users/bazley/update_pictures" for ::1 at 2016-01-01 21:26:59 +0000 Processing by CharactersController#update_pictures as HTML
Parameters: {
"utf8"=>"✓","authenticity_token"=>"rvhu...fhdg==","standardpicture"=>{
"picture"=>#
表单提交成功,但它无法正常工作,因为Rails没有在S3上保存正确的位置(“图片”,字符串);相反,它认为位置是
"picture"=>#
您可以在提交的参数中看到这一点.它应该是这样的：
"picture"=>"//websmash.s3.amazonaws.com/uploads/220f5378-1e0f-4823-9527-3d1170089a49/europe.jpg"},"commit"=>"Upload pictures"}
我不明白的是,当表格中出现所有正确的信息时,为什么它会导致参数错误.它明确地说
data-url="https://websmash.s3.amazonaws.com"
在表单中,jQuery包括
url: form.data('url'),
出了什么问题？
为了完整性：在控制器中：
before_action :set_s3_direct_post
.
.
def set_s3_direct_post
@s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}",success_action_status: '201',acl: 'public-read')
end
表格：
<%= 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 }
} do |f| %>
aws.rb初始化器：
Aws.config.update({
region: 'us-east-1',credentials: Aws::Credentials.new(ENV['AWS_ACCESS_KEY_ID'],ENV['AWS_SECRET_ACCESS_KEY']),})
S3_BUCKET = Aws::S3::Resource.new.bucket(ENV['S3_BUCKET'])
编辑
控制台显示此错误：
Uncaught TypeError: Cannot read property 'innerHTML' of null
在这个文件里面(tmpl.self-c210 … 9488.js？body = 1)：
(function ($) {
"use strict";
var tmpl = function (str,data) {
var f = !/[^\w\-\.:]/.test(str) ? tmpl.cache[str] = tmpl.cache[str] ||
tmpl(tmpl.load(str)) :
new Function(
tmpl.arg + ',tmpl',"var _e=tmpl.encode" + tmpl.helper + ",_s='" +
str.replace(tmpl.regexp,tmpl.func) +
"';return _s;"
);
return data ? f(data,tmpl) : function (data) {
return f(data,tmpl);
};
};
tmpl.cache = {};
tmpl.load = function (id) {
return document.getElementById(id).innerHTML;
};
tmpl.regexp = /([\s'\\])(?!(?:[^{]|\{(?!%))*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g;
tmpl.func = function (s,p1,p2,p3,p4,p5) {
if (p1) { // whitespace,quote and backspace in HTML context
return {
"\n": "\\n","\r": "\\r","\t": "\\t"," " : " "
}[p1] || "\\" + p1;
}
if (p2) { // interpolation: {%=prop%},or unescaped: {%#prop%}
if (p2 === "=") {
return "'+_e(" + p3 + ")+'";
}
return "'+(" + p3 + "==null?'':" + p3 + ")+'";
}
if (p4) { // evaluation start tag: {%
return "';";
}
if (p5) { // evaluation end tag: %}
return "_s+='";
}
};
tmpl.encReg = /[<>&"'\x00]/g;
tmpl.encMap = {
"<" : "<",">" : ">","&" : "&","\"" : ""","'" : "'"
};
tmpl.encode = function (s) {
/*jshint eqnull:true */
return (s == null ? "" : "" + s).replace(
tmpl.encReg,function (c) {
return tmpl.encMap[c] || "";
}
);
};
tmpl.arg = "o";
tmpl.helper = ",print=function(s,e){_s+=e?(s==null?'':s):_e(s);}" +
",include=function(s,d){_s+=tmpl(s,d);}";
if (typeof define === "function" && define.amd) {
define(function () {
return tmpl;
});
} else {
$.tmpl = tmpl;
}
}(this));
最佳答案
终于找到了答案here.只需要去application.js并进行更改
//= require jquery-fileupload
至
//= require jquery-fileupload/basic
基督在串联.在获得更多2个视图时,只有50个重复点.
