如何从单个“选择文件"上传多个图像?django admin中的选择器

问题描述

我正在做一个模拟服装订购系统的小项目，以提高我的django技能.

I'm doing this little project simulating a clothing ordering system to brush up my django skills.

我必须添加某些项目的图片(不是固定编号).因此，在Item模型中使用固定数量的图像字段并不理想.因此，我想到了另一个模型，该模型仅包含通过键连接到模型项目"的图像.

I have to add several pictures of a certain item(not a fixed number). So, using a fixed number of image fields in Item model is not ideal. So, I thought of another model consisting only of images connected to the model 'items' by a key.

现在，我知道django具有内联选项，可以根据需要一一添加模型对象.但这似乎有些麻烦，因为您必须打开该对话框并一张一张地选择图像.

Now I know that django has the inline option for adding model objects one by one as per requirement. But that seems a bit of a sucker as you have to open that dialog box and select the images one by one.

是否有可能有一个选择器，通过它我们可以一次选择多个文件并将它们添加到模型中?

Is it possible that there be a selector via which we could choose multiple files at once and they be added to the model??

推荐答案

是的，有一种简便的方法.首先声明一个图像类，例如:

Yes, there is a handy way.First declare an image class, something like:

class Image(models.Model):
    condo = models.ForeignKey(Condo, on_delete=models.CASCADE, related_name='images')
    image = models.FileField(upload_to="images/")
    uploaded_at = models.DateTimeField(auto_now_add=True)

在表单创建中不要添加一行以显示 FileField

In the form creation don't add a line for presenting a FileField

class ListingForm(forms.ModelForm):
    ...
    ...
    #photos = forms.FileField(required=False) #Don't do it.

但在模板中，除其他外，也添加以下内容:

But rather in the template, among the other lines, add this too:

<form action="" method="post" autocomplete="off" enctype="multipart/form-data">
    {% csrf_token %}
    {{ your_form|crispy }} <br/>
    <input type="file" name="images" multiple>
    <input type="submit" value="Submit">
</form>

在处理您的 POST 请求的视图中，您可以使用以下方式处理上传的图像:

In the view that handles your POST request, you can process the uploaded images with:

from app.forms import Image


if request.method == 'POST':
...
...
    for file in request.FILES.getlist('images'):
        instance = Image(
            condo=Condo.objects.get(your_parent_objects_id),
            image=file
        )
        instance.save()

这将为每个图像创建一个新的Image对象，并将实际文件保存到您的媒体文件夹中.

This creates new Image object for each image and saves the actual files to your media folder.

此外，由于可能的恶意行为，我建议重命名用户正在上传的文件.

Additionally, I'd suggest to rename the files your users are uploading due to possible malicious acts.

我通过创建一个小函数并使用它代替了"images/" 部分来完成此操作.

I've done this by creating a small function and using it instead of the "images/" part for it.

import uuid
def images_directory_path(instance, filename):
    return '/'.join(['images', str(instance.condo_id.id), str(uuid.uuid4().hex + ".png")])

# in Image class (models.py)
image = models.FileField(upload_to=images_directory_path)

最后一次修改为图像生成新名称，即 uuid4 ，为它们添加.png扩展名，并创建指向 media/文件夹的完整链接.

This last modification generates new names for the images as uuid4, adds .png extension to them and creates full link to the media/ folder.

当然，目前还没有验证是否可以验证上传的文件的格式或大小，但这是另一个问题的主题.

Of course, there is no validation present whether the format or size of the uploaded files are valid, but that is a topic for another question.

您可以使用变量 images 访问图像，因为它是与给定对象(在本例中为Condo)连接的所有图像的 related_name .

You can access the images with the variable images as it is the related_name for all connected images to the given object (in this case Condo).

最后，这是很好Vitor Freitas的文章，其中介绍了如何使用Javascript插件通过进度栏上传多张图片.

Lastly, this is a a great article by Vitor Freitas about using Javascript plugins for uploading multiple images with progress bar.

这篇关于如何从单个“选择文件"上传多个图像?django admin中的选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！