我遵循
https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails#jquery-file-upload-callbacks教程在本地开发环境中使用s3_direct_upload.有一些javascripts为每个文件字段设置fileupload函数.如果我只是简单地在表单下面包含代码,这一切都很有用,但如果我将代码放在app / assets / javascripts /下的js.erb文件中,它就行不通.错误是：
ActionView::Template::Error (undefined method `url' for nil:NilClass
(in /s3_direct_upload_gem_test/app/assets/javascripts/s3_direct_upload.js.erb)):
18:
19: <%= @s3_direct_post.url %>
20:
21: <%= javascript_include_tag :s3_direct_upload %>
app/assets/javascripts/s3_direct_upload.js.erb:14:in `block in singleton class'
如您所见,上面代码中的第19行用于打印出@ s3_direct_post.url.当我在文件中包含所有javascript时,它被正确打印.如果我跟踪s3_direct_upload.js.erb中的第14行,那么它是url行：
fileInput.fileupload({
fileInput: fileInput,url: '<%= @s3_direct_post.url %>',type: 'POST',autoUpload: true,formData: <%= @s3_direct_post.fields.to_json.html_safe %>,
看起来由于某种原因,资产文件夹(在资产管道中)下的javascript文件是单独编译的,因此在此处未设置在Controller中设置的@ s3_direct_post.
当然,我总是把它们放在< script>中.在查看器文件但它不是很优雅.有没有办法分离特定于页面的js编码并解决上面的问题？
解决方法
/ assets / javascript中的所有JS文件都是资产管道的一部分.在生产中,资源管道在部署Rails应用程序时预先编译(例如,不在每个请求上).这就是@ s3_direct_post.url为零的原因.
我同意在视图中注入整个JS代码并不理想,也不是很优雅.在过去,我提出了从Google Analytics等JS框架中获取灵感的方法,其中HTML中只放置了2-3行JS：
/* /assets/javascripts/s3_direct_upload.js */
window.MyApp = {};
window.MyApp.config = {};
window.MyApp.config.getS3Url = function() {
if(typeof(window.MyApp.config._s3Url) == ‘undefined’) {
throw “No S3 URL configured”;
}
return window.MyApp.config._s3Url;
};
window.MyApp.config.setS3Url = function(url) {
window.MyApp.config._s3Url = url;
}
// ...
$('#upload-button').on('click',function(){
fileInput.fileupload({
fileInput: fileInput,url: window.MyApp.config.getS3Url(),autoUpload: true
})
});
然后视图只需要引用您创建的Config API：
<script type=“text/javascript”>
window.MyApp.config.setS3Url('<%= @s3_direct_post.url %>');
</script>
但是如果你真的决定在视图中没有任何JS.您可以通过动态JSON请求加载配置：
class JSConfigsController < ApplicationController
def index
configs = {
's3URl' => @s3_direct_post.url
# etc
}
respond_to do |f|
f.json do
render json: {config: configs} # => {"config": {"s3Url": "http://the_url"}}
end
end
end
end
然后,您可以通过请求/js_configs.json通过ajax加载所有配置.但是,由于Ajax的异步特性,这种方法需要更加小心.例如,在Ajax请求完成检索之前,您必须小心不要调用依赖于配置的JS函数.
