【问题标题】：How to add multiple images to a django form asynchronously before form submit如何在表单提交之前将多个图像异步添加到 django 表单
【发布时间】：2019-08-19 23:35:39
【问题描述】：

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

问题：通常用户使用智能手机拍照。这使得图像大小高达 10MB 。 13张图片可以变成130MB的形式。我的 django 服务器最多可以接受 10MB 的表单。所以我不能减少图像服务器端

我想要做什么：我想要这样当用户将每个图像上传到表单时。该图像的大小在客户端减小，并使用 Ajax 异步保存在我的服务器上的临时位置。创建帖子后，所有这些图像都链接到帖子。所以基本上当用户在帖子创建表单上点击提交时。它是一种没有图像的超轻形式。听起来太雄心勃勃了..哈哈也许

我目前所拥有的：

我有没有异步部分的模型/视图（所有创建帖子的 django 部分）。如，如果添加所有图像后的表单小于 10MB。我的帖子是用多少张额外的图片创建的
我的 Javascript 代码可以减小客户端图像的大小并将其异步添加到我的服务器。我需要做的就是给它一个端点，这是一个简单的 url
我对我计划如何实现这一目标有一个粗略的了解

现在向您展示我的代码

我的模型（只是 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，因为它们不相关

【问题讨论】：

你能显示表单所在的html部分吗？
@Jay 我已经添加了表单的 html 部分。很抱歉我应该从一开始就添加它

标签： django python-3.x django-forms django-views

【解决方案1】：

下面是我觉得解决上述问题可能比较简单的答案

我是怎么想到的

我想给某人发一封电子邮件。我点击了撰写我没有输入任何内容。我被某事分心，不小心关闭了浏览器。当我再次打开电子邮件时。我看到有一个草稿。它里面没有任何东西。我就像 尤里卡！

电子邮件有什么

sender = (models.ForeignKey(User))
receiver =  models.ForeignKey(User
subject =  models.CharField()
message = models.TextFied()
created_at = models.DateTimefield()


#Lets assume that Multiple attachments are like my model above.

现在要注意的是当我单击撰写并关闭窗口时。它只有上述两个属性

  sender = request.user
  created_at = timezone.now()

它只用这 2 个东西创建了 email 对象。所以所有剩余的属性都是可选的。它也将其保存为草稿，因此还有另一个名为

的属性

is_draft = models.BooleanField(default=True)

很抱歉，我打了这么多东西，但我还没有说到重点（我一直在看很多法庭剧。都是相关的）

现在让我们将所有这些应用到我的问题上。（我相信你们中的一些人已经猜到了解决方案）

我的模型

'''I have made a lot of attributes optional'''
class Post(models.Model):
    user = models.ForeignKey(User, related_name='posts') #required
    title = models.CharField(max_length=250, unique=True, blank=True, null=True,) #optional
    slug = models.SlugField(allow_unicode=True, unique=True, max_length=500, blank=True, null=True,) #optional
    message = models.TextField(blank=True, null=True,) #optional
    post_image = models.ImageField(blank=True, null=True,) #optional
    created_at = models.DateTimeField(auto_now_add=True) #auto-genetrated
    is_draft = models.BooleanField(default=True) #I just added this new field

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

现在在我上面的代码中，创建这篇文章唯一需要的是登录用户

我在导航栏上创建了一个名为草稿

的标签

之前：当用户点击添加帖子时。呈现了一个空白表单。用户填写的内容以及满足所有要求时创建的帖子对象。上面的create_post 函数管理创建此帖子的视图

现在：当用户点击添加帖子时。立即创建一个帖子，用户现在看到的空白表单是post_edit 表单。我正在添加 Javascript 障碍来阻止表单提交，除非我之前的所有必填字段都得到满足。

图像是从我的post_edit 表单异步添加的。它们不再是孤立的图像。我不需要像以前那样的另一个模型来临时保存图像。当用户添加图像时，他们将一一发送到服务器。如果一切正常。在异步添加所有图像之后。用户在点击提交时提交了一个超轻量级的表单。如果用户放弃表单，它会以 Draft(1) 的形式留在用户导航栏上。您可以让用户删除此草稿。如果他不需要它。或者有一个简单的代码，比如

如果它仍然是草稿，请在 1 周后删除草稿。你可以在用户登录时添加这个

if post.is_draft and post.created_at > date__gt=datetime.date.today() + datetime.timedelta(days=6)

我将尝试制作一个 github 代码，以便使用 javascript 组件进行精确执行。

请告诉我您对这种方法的看法。我怎样才能更好地做到这一点。或者有什么不清楚的地方问我

【讨论】：

【解决方案2】：

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

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

解决方案

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

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

更新您的 models.py

models.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 后，添加 serializers.py 和以下代码。

serializers.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 函数将完成这项工作。可以从这里找到此方法的实现。

在 viewset 中添加此序列化程序，如下所示

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 以在用户选择额外图像并使用 image 字段发布时使用 POST 方法将其上传到 <domain>/ajax/temp_upload/ 时处理 iamge 上传，这将返回您正在关注示例 json 数据。

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

您可以从 json 中的reduced_image 键预览图像。

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

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

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

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

forms.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")

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

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

forms.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 以保持文件系统清洁。

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

我知道答案太长而无法阅读，对此深表歉意，但如果有任何改进，请编辑此帖子

【讨论】：

非常感谢您提供如此详细的解释。我已授予您此答案的 100 名声望。但它对我的口味来说太复杂了。我想要更简单的东西
哦！非常感谢！