我遵循了这一操作,并将全尺寸图像保存到S3:
https://github.com/uploaders/direct-aws-sdk-rails-4.2
但我很难先调整照片的大小。当加载具有输入表单的视图时,我在chrome控制台上遇到一个js错误。
未捕获类型错误:无法读取与以下两个文件相关的未定义属性“fileupload”:
jquery.filepload-process
var originalAdd=$.blueimp.filepload.prototype.options.add;
和
jquery.filepload-image
$.blueimp.filepload.prototype.options.processQueue.unshift(
我正在复制粘贴这里列出的js文件:
https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing
我的上传JS看起来像:
...
fileInput.fileupload({
fileInput: fileInput,
url: "http://" + s3params.url.host,
type: 'POST',
autoUpload: true,
formData: s3params.fields,
paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
dataType: 'XML', // S3 returns XML if success_action_status is set to 201
replaceFileInput: false,
disableImageResize: false,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 800,
imageMaxHeight: 800,
imageCrop: true, // Force cropped images
...
我相信我的困惑可能与我如何在项目中包含javascript文件有关。我已将列出的文件的源放在:
供应商/资产/javascript
并在application.js中引用它们,如下所示:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.widget
//= require load-image.all.min
//= require jquery.fileupload-image
//= require canvas-to-blob.min
//= require jquery.iframe-transport
//= require jquery.fileupload-process
//= require z.jquery.fileupload
//= require_tree .
如果我删除:
//= require jquery.fileupload-process
//= require jquery.fileupload-image
我可以再次上传,但没有调整大小。