如何解决一旦实现将图像保存在S3中,我的Java脚本裁剪器就会停止工作django
我正在创建一个网站来上传图像并裁剪所述图像,并且一切正常,直到实现将图像保存在S3中为止。
This is how it looks like with the s3 impelented
And this is how it should look,and how it looks when i comment out the S3 part in the settings
这是我的设置:
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
AWS_ACCESS_KEY_ID = 'AKIAZ5FSUY7STUQSZKVO'
AWS_SECRET_ACCESS_KEY = '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'
AWS_STORAGE_BUCKET_NAME = 'djangos3-2'
AWS_S3_OBJECT_PARAMETERS = {
'CacheControl': 'max-age=86400',}
AWS_QUERYSTRING_AUTH = 'False'
S3_USE_SIGV4 = True
AWS_S3_SIGNATURE_VERSION = 's3v4'
图像模型:
class ImageModel(models.Model):
created_on = models.DateTimeField(null=True)
created_by = models.ForeignKey(User,related_name='images',editable=False,on_delete=models.PROTECT)
image = models.ImageField(upload_to='storage')
和模板
{% extends "base.html" %}
{% block Title %} - SW1+ Data Entry - Crop Upload{% endblock Title %}
{% load static %}
{% block headScript %}
<link rel="stylesheet" type="text/css" href="{% static 'node_modules/cropperjs/dist/cropper.css' %}" />
<script type="text/javascript" src="{% static 'node_modules/cropperjs/dist/cropper.js' %}"></script>
<style>
.image{
display: block;
max-width: 100%;
}
</style>
{% endblock headScript %}
{% block body %}
<a href="{% url 'sw2manager:data_entry' %}" class="btn btn-primary">Back</a>
<div>
<img id="image" src="{{image.image.url}}" style="width: 450px;height: 350px;">
</div>
<------ Code not shone for briefness ------->
<script type="text/javascript ">
var image = document.getElementById('image');
image.addEventListener('cropend',function (e) {
crop();
});
var cropper = new Cropper(image,{});
var formData;
function crop(){
cropper.getCroppedCanvas().toBlob(function (blob) {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
document.querySelector("#imaget").src = imageUrl;
formData = new FormData();
formData.append('image',blob,"blob.png");
formData.append('csrfmiddlewaretoken','{{ csrf_token }}');
});
}
$("#crop").on("click",crop);
function save(){
$.ajax("{% url 'sw2manager:imageajaxupload' image.page.pk %}",{
method: "POST",data: formData,processData: false,contentType: false,success: function () {
window.location.reload();
console.log('Upload success');
alert("Upload success!!!");
},error: function () {
console.log('Upload error');
alert("Upload error...");
}
});
}
$("#save").on("click",save);
我对js非常陌生,而裁剪器本身是在别人的帮助下构建的,所以也许我缺少明显的东西,所以如果有人可以提供任何帮助,我将非常感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。