0
私はrailsアプリケーションを開発しています。amazonを使用して自分のサイトのイメージをホストしています。アップロードする。挿入を編集するとき、この挿入が既に持っているイメージを見て、それらをdropzoneプレビューに表示したいと思います。私は自分のコンピュータ上の写真をアップロードし、生産に私はアマゾンS3バケットにアップロードし、これは私のコード開発ではamazonからdropzone jsでサムネイルを作成するときにエラーが発生しました
drop_zone = new Dropzone '#drag_drop_img_edit', {
url: '/insertions/upload'
autoProcessQueue: false
uploadMultiple: true
maxFilesize: 2
addRemoveLinks: true
parallelUploads: 10
maxFiles: 5
acceptedFiles: 'image/*'
paramName: 'file'
successmultiple: (data, response) ->
$('#directory_up').val(response.directory)
$('#edit-insertion').off('submit').submit();
init: ->
myDropzone = this;
this.on("removedfile", (file) ->
removedfiles.push(file)
console.log(file)
i = myDropzone.files .indexOf(file);
if(i != -1)
myDropzone.files .splice(i, 1);
)
this.on("addedfile", (file) ->
if (myDropzone.files.length)
len = this.files.length
myfun = ->
if(myDropzone.files[_i].name == file.name)
myDropzone.removeFile(file)
myfun() for _i in [0...len-1]
defaultRadioButton = Dropzone.createElement(
'<div class="default_pic_container"><input type="radio" name="first_pic" value="'+file.name+'" /> Set Principal</div>');
file.previewElement.appendChild(defaultRadioButton);
)
$("#edit-insertion-btn").on 'click', (e) ->
s = JSON.stringify(removedfiles)
$('#deleted_image').val(s)
$('#first_img').val($('input[name=first_pic]:checked').val())
if myDropzone.getQueuedFiles().length > 0
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
else
console.log('shalla')
params: {
'authenticity_token': AUTH_TOKEN
}
}
//HERE I TAKE THE INFORMATIONS ABOUT THE IMAGES OF THE INSERTION, AND I ADD THEM IN MY DROPZONE VIEW
my_array = JSON.parse($('#my-images').val())
console.log(my_array)
addToDropZone = (file, index) ->
mock = { name: file.name, size: 12345, accepted: true, dataURL: file.url}
#console.log(mock.url)
drop_zone.emit("addedfile", mock)
console.log(mock.dataURL)
// this is the new api
drop_zone.createThumbnailFromUrl(mock, drop_zone.options.thumbnailWidth,
drop_zone.options.thumbnailHeight,
drop_zone.options.thumbnailMethod, true, (thumbnail) ->
drop_zone.emit('thumbnail', mock, thumbnail)
drop_zone.emit("complete", mock)
drop_zone.files.push(mock)
if (index == parseInt($('#first_img_index').val()))
s = "input[value='"
s += mock.name
s += "']"
$(s).prop('checked', true)
,'anonymous') // added anonymous due to cross origin
#drop_zone.options.maxFiles = drop_zone.options.maxFiles - 1
addToDropZone(my_array[i], i) for i in [0...my_array.length]
であるため、ドロップゾーン5.0 の新しいAPIにいくつかの変更でthis tutorialを追いました。開発ではすべてがうまく動作し、サムネイルが生成されますが、プロダクションでは、サーバー内のイメージのサムネイルは表示されません。コンソールでは、私はこのメッセージ
Access to Image at 'http://s3.eu-west-2.amazonaws.com/bookmarket-assets/oni.jpg?1505901043' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
は、私も私のバケットにCORSを設定します、これはどのように私はこのエラーを回避することができ、XML
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
あります？ありがとう