一旦实现将图像保存在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 (将#修改为@）