![](/img/trans.png)
[英]Javascript FormData() File Upload to S3 works in Chrome but not in Safari
[英]Rails: Uploading dropzone, S3, carrierwave, not working in Safari, but works in Google Chrome
我正在使用帶有S3和載波的dropzone。 我可以通過谷歌瀏覽器上傳圖片,但我無法使用Safari,這很奇怪。
這是我的表格
= nested_form_for @trip, html: { multipart: true, id: 'fileupload', class: 'directUpload', data: { 'form-data' => (@s3_direct_post.fields), 'url' => @s3_direct_post.url, 'host' => URI.parse(@s3_direct_post.url).host } } do |f|
.dropzone#imageUpload
= f.simple_fields_for :trip_images, TripImage.new, child_index: TripImage.new.object_id do |ff|
= ff.file_field :photo, class: 'hide form-fields'
= f.button :submit, id: "submit-data"
這是在Trip控制器中
def set_s3_direct_post
@s3_direct_post = S3_BUCKET.presigned_post(key: "/uploads/temporary/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'public-read', content_type: 'image/jpeg')
end
這是TripImage模型
class TripImage < ActiveRecord::Base
belongs_to :resource, :polymorphic => true
mount_uploader :photo, PhotoUploader
after_create :process_async
def to_jq_upload
{
'name' => read_attribute(:attachment_file_name),
'size' => read_attribute(:attachment_file_size),
'url' => attachment.url(:original),
'thumbnail_url' => attachment.url(:thumb),
'delete_url' => "/photos/#{id}",
'delete_type' => 'DELETE'
}
end
private
def process_async
PhotoVersioningJob.set( wait: 5.seconds ).perform_later(self.id)
end
end
這是js
$(function(){
$('.directUpload').find(".dropzone").each(function(i, elem) {
s3ImageUpload(elem);
});
})
function s3ImageUpload(elem){
var fileInput = $(elem);
var form = $(fileInput.parents('form:first'));
var form_url = form.data('url');
var form_data = form.data('form-data');
Dropzone.options.imageUpload = {
url: form_url,
params: form_data,
uploadMultiple: false,
addRemoveLinks: true,
removedfile: function(file){
//some codes
},
success: function(file, serverResponse, event){
//some codes
},
error: function(data){
//some codes
}
};
}
編輯:當前的CORS配置
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
<AllowedHeader>origin</AllowedHeader>
</CORSRule>
</CORSConfiguration>
經過測試,不起作用
編輯:我也有S3直接上傳,不知道這是否也會影響它?
S3DirectUpload.config do |c|
c.access_key_id = Rails::AWS.config['access_key_id'] # your access key id
c.secret_access_key = Rails::AWS.config['secret_access_key'] # your secret access key
c.bucket = Rails::AWS.config['bucket_name'] # your bucket name
c.region = 's3' # region prefix of your bucket url. This is _required_ for the non-default AWS region, eg. "s3-eu-west-1"
end
我最近遇到了與Safari類似的問題,並發現它正在發送一個Chrome沒有的額外的Access-Control-Request-Header - 特別是'origin'。 為了解決這種差異,我需要更新目標存儲桶上的AWS CORS配置。
有關請求標頭與允許的標頭配置匹配的必要性的AWS文檔 。 第三個要點使這一要求明確:
預檢請求中請求的Access-Control-Request-Headers標頭中列出的每個標頭必須與AllowedHeader元素匹配。
這個有用的StackOverflow答案提供了一個示例配置:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>x-requested-with</AllowedHeader>
</CORSRule>
</CORSConfiguration>
需要添加什么才能讓它在Safari中運行:
<AllowedHeader>origin</AllowedHeader>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.