Question

我的本地开发和实时开发服务器具有完全相同的代码和数据库（所有静态/媒体文件都上传到s3存储）。

我的Post模型带有image字段。我的帖子有一个图片上传字段，通过AJAX上传到我的s3存储。在我的本地服务器和实时服务器中，映像成功上传，并保存s3存储桶中该映像的URL。因此，当我在本地服务器中提交帖子时，它不会再次上传，我只是在渲染图像时指向URL。

但是，我的远程服务器不会这样做。通过AJAX上传图像后，当我提交Post表单时，它再次提交图像（它显示我的浏览器上传进度 - 3％，5％，10％等等。）。

知道为什么会这样吗？我的代码在这里：

模型

class Post(models.Model):
    image = models.FileField(null=True, blank=True)

视图

def post(request):
    if request.user.is_authenticated():
        form_post = PostForm(request.POST or None, request.FILES or None)
        if form_post.is_valid():
            instance = form_post.save(commit=False)
            instance.user = request.user
            ...
            if instance.image:
                instance.imageURL = "https://s3.us-east-2.amazonaws.com/my-bucket/media/%s" % filename
                instance.image = None #this prevents re-upload upon form submission

            instance.save()

            return HttpResponseRedirect('/')
        else:
            form_post = PostForm()

        context = {
            'form_post': form_post,
        }

        return render(request, 'post/post.html', context)
    else:
        return HttpResponseRedirect("/accounts/signup/")

ajax view

def upload_image(request):
    random_filename = request.POST.get('random_filename')
    if request.is_ajax():
        if request.FILES:
            img = request.FILES.get('image')


        session = boto3.Session(
            aws_access_key_id=AWS_ACCESS_KEY_ID,
            aws_secret_access_key=AWS_SECRET_ACCESS_KEY,
        )
        s3 = session.resource('s3')

        s3.Bucket('my-bucket').put_object(Key='media/%s' % random_filename, Body=img)
        return HttpResponse()

    else:
        return HttpResponse()

模板

<input id="id_image" type="file" name="image" />

JS

$('input#id_image').on('change', function(e) {
    var file = $('input[type=file]')[0].files[0];
    var formData = new FormData();

    $('.add_file_div h3').hide();
    $('.add_file_label').css({
    'border-radius': '5px',
    'box-shadow': '5px',
    });
    var imagePath = URL.createObjectURL(e.target.files[0]);
    var random_filename = random_string();

    formData.append('image', file);
    formData.append('csrfmiddlewaretoken', $("input[name='csrfmiddlewaretoken']").val());
    formData.append('random_filename', random_filename);

    $.ajax({
        url: '/upload_image/',
        data: formData,
        type: 'POST',
        contentType: false,
        processData: false,
        success: function(){
            console.log('SUCCESSFULLY UPLOADED');
            $('.add_file_label').css('opacity', '1');
            $('.add_file_label').css('background', 'url(' + imagePath + ') scroll no-repeat center/cover');
            $('.loading_spinner').css('visibility', 'hidden');
        }
    });
    $('.add_file_label').css('background', 'url(' + imagePath + ') scroll no-repeat center/cover');
    $('.add_file_label').css('opacity', '0.4');
    $('.loading_spinner').css('visibility', 'visible');
    console.log(imagePath);

    $('.add_file_label').append('<input class="temp_s3_url" type="hidden" name="temp_s3_url">');
    $('.temp_s3_url').val(random_filename);
    $('input#id_imageURL').hide();
    $('#delete_preview_image').show();
});

PS：我的nginx有client_max_body_size 200m;，所以不是问题

Answer 1

我认为同样的问题也可能在当地发生。但是当你在本地时，速度足够快，你看不到上传进度条。问题是，当您在ajax上传中取得成功时，您应该清除file字段

how to reset <input type = "file">

所以里面

success: function(){
  console.log('SUCCESSFULLY UPLOADED');
  $('.add_file_label').css('opacity', '1');
  $('.add_file_label').css('background', 'url(' + imagePath + ') scroll no-repeat center/cover');
  $('.loading_spinner').css('visibility', 'hidden');
}

您可以重置文件元素以使其成为空值，否则它将随表单一起提交。

另一种选择可能是只给文件输入字段id而不是name。如果input元素没有附加名称，则表单未提交

远程图像上载与开发服务器不同

1 个答案: