如何在表单提交之前异步将多个图像添加到Django表单

Question

简介：我有一个python Django网络应用程序，允许用户创建帖子。每个帖子都有1个主图像，然后是与该帖子相关联的额外图像（最多12个和最小2个）。我想让用户添加总共13张图片。1张主图像和12张额外图像。

问题：通常用户会使用智能手机拍照。使图像大小最大为10MB。具有13张图像，可以变成130MB的格式。我的django服务器最多可以接受10MB的表格。所以我无法减少ServerSide的图像

我想做的是：我希望这样，当用户将每个图像上载到表单时。该映像的大小在客户端减小了，并使用Ajax异步保存在我的服务器上的临时位置。创建帖子后，所有这些图像都将链接到该帖子。因此，基本上，当用户点击时，在帖子创建表单上提交。它是没有图像的超轻形式。听起来太野心了..

到目前为止，我有：

1. 我有没有异步部分的模型/视图（所有创建帖子的Django部分）。如图所示，如果添加所有图像后的表单小于10MB。我的帖子是用多少额外的图片创建的
2. 我有Javascript代码，可以减少客户端图像的大小并将其异步添加到我的服务器中。我需要做的就是给它一个端点，这是一个简单的网址
3. 我对如何实现这一目标有一个大概的认识

现在向您展示我的代码

我的模型（只是Django部分尚未添加异步部分）

class Post(models.Model):
    user = models.ForeignKey(User, related_name='posts')
    title = models.CharField(max_length=250, unique=True)
    slug = models.SlugField(allow_unicode=True, unique=True, max_length=500)
    message = models.TextField()
    post_image = models.ImageField()

class Extra (models.Model): #(Images)
    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='post_extra')
    image = models.ImageField(upload_to='images/', blank=True, null=True, default='')
    image_title = models.CharField(max_length=100, default='')
    image_description = models.CharField(max_length=250, default='')
    sequence = models.SmallIntegerField(validators=[MaxValueValidator(12), MinValueValidator(1)])

我的观点（只是Django部分尚未添加异步部分）

@login_required
def post_create(request):
    ImageFormSet = modelformset_factory(Extra, fields=('image', 'image_title', 'image_description'), extra=12, max_num=12,
                                        min_num=2)
    if request.method == "POST":
        form = PostForm(request.POST or None, request.FILES or None)
        formset = ImageFormSet(request.POST or None, request.FILES or None)
        if form.is_valid() and formset.is_valid():
            instance = form.save(commit=False)
            instance.user = request.user
            instance.save()
            for index, f in enumerate(formset.cleaned_data):
                try:
                    photo = Extra(sequence=index+1, post=instance, image=f['image'],
                                 image_title=f['image_title'], image_description=f['image_description'])
                    photo.save()
                except Exception as e:
                    break   

            return redirect('posts:single', username=instance.user.username, slug=instance.slug)

现在，为了简单起见，我不会在此问题中添加任何Javascript。将以下脚本标签添加到我的表单中，将图像异步保存到服务器。如果愿意，可以阅读有关Filepond的更多信息。

'''See the urls below to see where the **new_image** is coming from'''
    FilePond.setOptions({ server: "new_image/",
                          headers: {"X-CSRF-Token": "{% csrf_token %}"}}
    }); #I need to figure how to pass the csrf to this request Currently this is throwing error

我的计划使其有效

在现有的2个模型下添加一个新模型

class ReducedImages(models.Model):
    image = models.ImageField()
    post = models.ForeignKey(Post, blank=True, null=True, upload_to='reduced_post_images/')

更改视图，如下所示（目前仅在主图像上工作。不确定如何获取多余的图像）

''' This could be my asynchronous code  '''
@login_required
def post_image_create(request, post):
    image = ReducedImages.objects.create(image=request.FILES)
    image.save()
    if post:
        post.post_image = image


@login_required
def post_create(request):
    ImageFormSet = modelformset_factory(Extra, fields=('image', 'image_title', 'image_description'), extra=12, max_num=12,
                                        min_num=2)
    if request.method == "POST":
        form = PostForm(request.POST or None)
        formset = ImageFormSet(request.POST or None, request.FILES or None)
        if form.is_valid() and formset.is_valid():
            instance = form.save(commit=False)
            instance.user = request.user
            post_image_create(request=request, post=instance) #This function is defined above
            instance.save()
            for index, f in enumerate(formset.cleaned_data):
                try:
                    photo = Extra(sequence=index+1, post=instance, image=f['image'],
                                 image_title=f['image_title'], image_description=f['image_description'])
                    photo.save()

                except Exception as e:
                    break
            return redirect('posts:single', username=instance.user.username, slug=instance.slug)
    else:
        form = PostForm()
        formset = ImageFormSet(queryset=Extra.objects.none())
    context = {
        'form': form,
        'formset': formset,
    }
    return render(request, 'posts/post_form.html', context)

我的urls.py

url(r'^new_image/$', views.post_image_create, name='new_image'),

关于如何进行这项工作的任何建议

我的模板

{% extends 'posts/post_base.html' %}
{% load bootstrap3 %}
{% load staticfiles %}

{% block postcontent %}
<head>

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" type="text/css"/>
    <link href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css" rel="stylesheet" type="text/css"/>
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" type="text/css"/>
    <link href="{% static 'doka.min.css' %}" rel="stylesheet" type="text/css"/>
    <style>
    html {
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
        font-size: 1em;
    }

    body {
        padding: 2em;
        max-width: 30em;
    }
    </style>
</head>
<body>
<div class="container">
    <h2> Add a new Recipe</h2>
    <form action="" method="post" enctype="multipart/form-data" id="form">
        {% csrf_token %}
        {% bootstrap_form form %}
        <img alt="" id="preview" src="" width="100" />
        <img alt="" id="new_image" src="" style="display: none;"  />
        {{formset.management_form}}
          <h3 class="text-danger">You must be present in at least 1 image making the dish. With your face clearly visible and
            matching your profile picture
        </h3>
        <h5>(Remember a picture is worth a thousand words) try to add as many extra images as possible
            <span class="text-danger"><b>(Minimum 2)</b></span>.
            People love to see how its made. Try not to add terms/language which only a few people understand.

         Please add your own images. The ones you took while making the dish. Do not copy images</h5>
        {% for f in formset %}
            <div style="border-style: inset; padding:20px; display: none;" id="form{{forloop.counter}}" >
                <p class="text-warning">Extra Image {{forloop.counter}}</p>
                {% bootstrap_form f %}

                <img alt="" src="" width="60" id="extra_image{{forloop.counter}}"  />
            </div>
        {% endfor %}

        <br/><button type="button" id="add_more" onclick="myFunction()">Add more images</button>

        <input type="submit" class="btn btn-primary" value="Post" style="float:right;"/>

    </form>

</div>
<script>
    [
        {supported: 'Promise' in window, fill: 'https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js'},
        {supported: 'fetch' in window, fill: 'https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.min.js'},
        {supported: 'CustomEvent' in window && 'log10' in Math && 'sign' in Math &&  'assign' in Object &&  'from' in Array &&
                    ['find', 'findIndex', 'includes'].reduce(function(previous, prop) { return (prop in Array.prototype) ? previous : false; }, true), fill: 'doka.polyfill.min.js'}
    ].forEach(function(p) {
        if (p.supported) return;
        document.write('<script src="' + p.fill + '"><\/script>');
    });
    </script>

    <script src="https://unpkg.com/filepond-plugin-image-edit"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview"></script>
    <script src="https://unpkg.com/filepond-plugin-image-exif-orientation"></script>
    <script src="https://unpkg.com/filepond-plugin-image-crop"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform"></script>
    <script src="https://unpkg.com/filepond"></script>

    <script src="{% static 'doka.min.js' %}"></script>

    <script>

    FilePond.registerPlugin(
        FilePondPluginImageExifOrientation,
        FilePondPluginImagePreview,
        FilePondPluginImageCrop,
        FilePondPluginImageResize,
        FilePondPluginImageTransform,
        FilePondPluginImageEdit
    );

// Below is my failed attempt to tackle the csrf issue

const csrftoken = $("[name=csrfmiddlewaretoken]").val();


FilePond.setOptions({
    server: {
        url: 'http://127.0.0.1:8000',
        process: {
            url: 'new_image/',
            method: 'POST',
            withCredentials: false,
            headers: {
                headers:{
        "X-CSRFToken": csrftoken
            },
            timeout: 7000,
            onload: null,
            onerror: null,
            ondata: null
        }
    }
}});


// This is the expanded version of the Javascript code that uploads the image


    FilePond.create(document.querySelector('input[type="file"]'), {

        // configure Doka
        imageEditEditor: Doka.create({
            cropAspectRatioOptions: [
                {
                    label: 'Free',
                    value: null
                }                   
            ]
        })

    });

The below codes are exacty like the one above. I have just minimised it

FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});
FilePond.create(document.querySelector('input[type="file"]'), {...});


// ignore this part This is just to have a new form appear when the add more image button is pressed. Default is 3 images


<script>
    document.getElementById("form1").style.display = "block";
    document.getElementById("form2").style.display = "block";
    document.getElementById("form3").style.display = "block";   

    let x = 0;
    let i = 4;
    function myFunction() {

          if( x < 13) {
            x = i ++
          }
      document.getElementById("form"+x+"").style.display = "block";
    }
</script>
</body>


{% endblock %}

我没有添加forms.py，因为它们不相关

Answer 1

根据您的问题，有四件事要做。

1. 制作临时文件存储跟踪器。
2. 用户选择图像后立即上传文件（存储上的某个位置可能是临时位置）服务器会响应缩小图像的链接。
3. 当用户发布仅传递对这些图像的引用的表单时，然后使用给定的引用保存帖子。
4. 有效处理临时位置。（通过一些批处理或一些芹菜任务。）

解决方案

1.为异步上传的文件制作临时文件存储跟踪器。

您临时上传的文件将按以下结构存储在TemporaryImage模型中。temp_folder

更新你的models.py

模型.py

class TemporaryImage(models.Model):
    image = models.ImageField(upload_to="temp_folder/")
    reduced_image = models.ImageField(upload_to="temp_thumb_folder/")
    image_title = models.CharField(max_length=100, default='')
    image_description = models.CharField(max_length=250, default='')
    sequence = models.SmallIntegerField(validators=[MaxValueValidator(12), MinValueValidator(1)])


class Post(models.Model):
    user = models.ForeignKey(User, related_name='posts')
    title = models.CharField(max_length=250, unique=True)
    slug = models.SlugField(allow_unicode=True, unique=True, max_length=500)
    message = models.TextField()
    post_image = models.ImageField()

class Extra (models.Model): #(Images)
    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='post_extra')
    image = models.ImageField(upload_to='images/', blank=True, null=True, default='')
    image_thumbnail = models.ImageField(upload_to='images/', blank=True, null=True, default='')
    image_title = models.CharField(max_length=100, default='')
    image_description = models.CharField(max_length=250, default='')
    sequence = models.SmallIntegerField(validators=[MaxValueValidator(12), MinValueValidator(1)])

这里TemporaryImage包含临时上传的文件，该字段raw_image代表原始上传的文件，reduced_image代表文件上传后生成的缩略图。

为了发送异步 java 脚本请求，您需要django-restframewrok通过以下命令进行安装。

pip install djangorestframework

安装restframework后，添加带有以下代码的serializer.py 。

序列化器.py

from rest_framework import serializers


class TemporaryImageUploadSerializer(serializers.ModelSerializer):
    class Meta:
        model = TemporaryImage
        field = ('id', 'image',)

    def create(self, validated_data):
        raw_image = validated_data['raw_image']
        # Generate raw image's thumbnail here
        thumbnail = generate_thumbnail(raw_image)
        validated_data['reduced_image'] = thumbnail
        return super(TemporaryImageUploadSerializer, self).create(validated_data)

当用户异步上传文件时，该序列化程序会生成缩略图。generate_thumbnail函数将完成这项工作。该方法的实现可以从这里找到。

在视图集中添加此序列化器，如下所示

apis.py

from rest_framework.generics import CreateAPIView, DestroyAPIView
from .serializers import TemporaryImageUploadSerializer

# This api view is used to create model entry for temporary uploaded file
class TemporaryImageUploadView(CreateAPIView):
    serializer_class = TemporaryImageUploadSerializer
    queryset = TemporaryImage.objects.all()

class TemporaryImageDeleteView(DestroyAPIView):
    lookup_field = 'id'
    serializer_class = TemporaryImageUploadSerializer
    queryset = TemporaryImage.objects.all()

这将为您的上传TemporaryImageUploadViewSet创建POST, PUT, PATCH,方法。DELETE

如下更新您的urls.py

urls.py

from .apis import TemporaryImageUploadView, TemporaryImageDeleteView

urlpatterns = [
  ...
  url(r'^ajax/temp_upload/$', TemporaryImageUploadView.as_view()),
  url(r'^ajax/temp_upload/(?P<user_uuid>[0-9]+)/$', TemporaryImageDeleteView.as_view()),
  ...
]

这将创建以下端点来处理异步上传

• <domain>/ajax/temp_upload/邮政
• <domain>/ajax/temp_upload/{id}/删除

现在这些端点已准备好处理文件上传

2.用户选择图片后立即上传文件

为此，您需要更新template.py来处理 iamge 上传，当用户选择额外的图像并通过image字段上传将其发布到<domain>/ajax/temp_upload/方法时POST，这将返回以下示例 json 数据。

{
    "id": 12,
    "image": "/media/temp_folder/image12.jpg",
    "reduced_image": "/media/temp_thumb_folder/image12.jpg",
}

您可以通过reduced_imagejson 中的键预览图像。

id是临时上传文件的参考，您需要将其存储在某个位置以在Post创建表单中传递。即作为隐藏字段。

我不会编写 javascript 代码，因为答案会变得更冗长。

3. 当用户发布表单时，仅传递对这些图像的引用。

上传的文件在 HTML 页面中id设置为隐藏字段。formset为了处理表单集，您需要执行以下操作。

表格.py

from django import forms

class TempFileForm(forms.ModelForm):
    id = forms.HiddenInput()
    class Meta:
        model = TemporaryImage
        fields = ('id',)

    def clean(self):
        cleaned_data = super().clean()
        temp_id = cleaned_data.get("id")
        if temp_id and not TemporaryImage.objects.filter(id=temp_id).first():
            raise forms.ValidationError("Can not find valida temp file")

这是单个上传的临时文件形式。

您可以通过formset在 django 中使用来处理此问题，如下所示

表格.py

from django.core.files.base import ContentFile

@login_required
def post_create(request):
    ImageFormSet = formset_factory(TempFileForm, extra=12, max_num=12,
                                        min_num=2)
    if request.method == "POST":
        form = PostForm(request.POST or None)
        formset = ImageFormSet(request.POST or None, request.FILES or None)
        if form.is_valid() and formset.is_valid():
            instance = form.save(commit=False)
            instance.user = request.user
            post_image_create(request=request, post=instance) #This function is defined above
            instance.save()
            for index, f in enumerate(formset.cleaned_data):
                try:
                    temp_photo = TemporaryImage.objects.get(id=f['id'])

                    photo = Extra(sequence=index+1, post=instance,
                                 image_title=f['image_title'], image_description=f['image_description'])
                    photo.image.save(ContentFile(temp_photo.image.name,temp_photo.image.file.read()))
                    
                    # remove temporary stored file
                    temp_photo.image.file.close()
                    temp_photo.delete()
                    photo.save()

                except Exception as e:
                    break
            return redirect('posts:single', username=instance.user.username, slug=instance.slug)
    else:
        form = PostForm()
        formset = ImageFormSet(queryset=Extra.objects.none())
    context = {
        'form': form,
        'formset': formset,
    }
    return render(request, 'posts/post_form.html', context)

这将保存带有给定参考的帖子（临时上传的文件）。

4、高效处理临时场地。

您需要处理temp_folder并temp_thumb_folder保持文件系统干净。

假设用户上传文件但没有提交帖子表单，那么您需要删除该文件。

我知道答案变得太长而无法阅读，对此表示歉意，但如果有任何改进，请编辑这篇文章

请参阅https://medium.com/zeitcode/asynchronous-file-uploads-with-django-forms-b741720dc952与此相关的帖子