在 Django 上传的文件中添加背景图片 - Python

在 Django 中，我们经常需要为页面添加一些背景图片来美化页面的外观。在这篇文章中，我们将介绍如何在 Django 上传的文件中添加背景图片。

准备工作

在开始之前，我们需要做一些准备工作。首先，我们需要安装 Pillow 库来处理图片。我们可以使用以下命令进行安装：

pip install Pillow

接着，我们需要创建一个新的 Django 应用程序并设置文件上传功能。这里我们不做过多的讲解，只提供一些基础代码来帮助你开始：

# settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# urls.py

from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    # ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

添加背景图

首先，我们需要在 Django 中创建一个视图（View），在该视图中我们将渲染一个包含背景图片的 HTML 模板。在这里，我们将使用一个名为 background.html 的模板，该模板将显示一个包含背景图片的 div 节点：

<!-- background.html -->

<div class="background" style="background-image: url('{{ background_image.url }}');">
    <!-- Your content here -->
</div>

注意我们是如何在 style 属性中使用 Django 模板语言来嵌入背景图片的。

接着，我们将定义一个视图（View），该视图将使用 background.html 模板并将数据传递给模板，以便在模板中使用。在视图中，我们还将为背景图片的上传提供一个简单的表单。

# views.py

from django.shortcuts import render
from django.conf import settings
from django.core.files.storage import FileSystemStorage

def upload(request):
    if request.method == 'POST' and request.FILES['background_image']:
        background_image = request.FILES['background_image']
        fs = FileSystemStorage()
        filename = fs.save(background_image.name, background_image)
        uploaded_file_url = fs.url(filename)
        return render(request, 'background.html', {
            'background_image': fs.url(filename)
        })
    return render(request, 'upload.html')

def background(request):
    return render(request, 'background.html')

在上面的代码中，我们定义了两个视图 upload 和 background。 upload 视图负责处理背景图片的上传，并将上传的图片保存在 media 目录中。 background 视图将简单地渲染 background.html 模板。

现在，我们需要创建一个模板（Template）来显示表单和背景图片。 我们将使用名为 upload.html 的模板：

<!-- upload.html -->

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>
        <label for="background_image">Upload background image:</label>
        <input type="file" name="background_image" id="background_image">
    </p>
    <button type="submit">Upload</button>
</form>

最后，我们需要在 urls.py 文件中定义视图的路径：

# urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.upload, name='upload'),
    path('background/', views.background, name='background'),
]

现在我们已经准备好了一切，可以运行 Django 应用程序并上传背景图片。 现在，当我们访问 /background/ 路径时，将渲染包含背景图片的 background.html 模板。

结论

在本文中，我们介绍了如何在 Django 上传的文件中添加背景图片。 我们学习了如何上传和保存图片，并在 Django 模板中使用它们。 该过程简单明了，适合新手使用。