Javascript 为什么有些浏览器将Blob对象设为空？如何预防？

我正在与Ruby on Rails5合作，并使用heroku hobby。然后我想让用户选择、裁剪并将图像从Javascript直接上传到AmazonS3

我使用jQuery文件上传和crapper.js来完成这项工作

下面的代码在我的MacBook Pro上的chrome中正常工作，但是，当涉及safari或iOS上的safari、iOS上的chrome时，它会生成空文件，但在s3上使用正确的名称

$function{ $'.directUpload'.findinput:file.eachfunctioni，元素{ var fileInput=$elem； var form=$fileInput.parents'form:first'； var submitButton=form.find'input[type=submit]； var progressBar=$； var barContainer=$.appendprogressBar； fileInput.afterbarContainer； var lastData=null； submitButton.点击按钮，功能{ $'form'.submitfunction{ 返回false； }; //获取裁剪数据 $'crop\u img'.cropper'getCroppedCanvas'.toBlobfunction blob{ lastData.files[0]=新文件[blob]，lastData.files[0]。名称； lastData.originalFiles[0]=lastData.files[0]； lastData.submit； } }; fileInput.fileupload{ fileInput:fileInput， url:form.data'url'， 键入：“POST”， 自动上载：false， formData:form.data'form-data'， paramName:'file'，//S3不喜欢嵌套的名称字段，即name=user[avatar\u url] 数据类型：“XML”，//如果success\u action\u status设置为201，则S3返回XML replaceFileInput:false， acceptFileTypes://\.\\/gif|jpe？g|png$/i， //singleFileUploads:false， maxNumberOfFiles:1， 顺序上传：正确， 限制多文件上传：1， limitConcurrentUploads:1， 添加：函数、数据{ if data.files&&data.files[0]{ var reader=新文件读取器； reader.onload=函数e{ $'.preview'。为空； $'.preview'.append$'，{type:'hidden'，name:fileInput.attr'name'，value:url} 表单输入； //删除错误的提交事件 $‘表格’。关闭‘提交’； //并再次提交 $'.directUpload'。提交； }, 失败：函数、数据{ submitButton.prop'disabled'，false； 进步吧。 cssbackground，红色。 文本上传失败！； } }; };

---

}您可能应该通过AJAX将canvasElement.toDataURL发送到PHP等服务器语言，在那里您可以将内容“tempfile.png”和$dataURLajaxResult归档，然后您就可以发送一个文件了。

非常感谢您的回答！实际上我正在使用Ruby on Rails，但这是同一件事吗？我想直接将它发送到s3因为我的服务器heroku需要很长时间才能通过RoR上传…我想做的是：