如何在Django中展示文件夹内PDF转换后的多张图片

1. 修改模型，新增转换后图片字段 #

在models.py中添加ImageField存储转换后的图片，让Django自动处理图片URL的生成：

from django.db import models
from django.contrib.auth.models import User

class UserUploadModel(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, null=True)
    file = models.FileField(upload_to='file_uploads')
    # 新增字段存储转换后的图片
    converted_image = models.ImageField(upload_to='converted_files', null=True, blank=True)

修改后执行数据库迁移：

python manage.py makemigrations
python manage.py migrate

2. 调整视图逻辑，关联转换后的图片 #

更新views.py，在PDF转换完成后，将图片路径关联到对应模型实例的converted_image字段：

from django.shortcuts import render, redirect
from app1.forms import UserUploadForm
from app1.models import UserUploadModel
from app1.convert import convert_file
from app1.transfer import move_dir
import os
from project1 import settings
from django.contrib.auth.decorators import login_required

@login_required
def home(request):
    if request.method == 'POST':
        form = UserUploadForm(request.POST, request.FILES)
        if form.is_valid():
            files = request.FILES.getlist('file')
            if files:
                for i in files:
                    file_instance = UserUploadModel(file=i, user=request.user)
                    file_instance.save()
                    pdf_path = file_instance.file.path
                    
                    # 执行PDF转图片，假设convert_file返回转换后的图片完整路径
                    converted_img_path = convert_file(pdf_path)
                    
                    # 构造相对MEDIA_ROOT的图片路径
                    img_filename = os.path.basename(converted_img_path)
                    relative_img_path = os.path.join('converted_files', img_filename)
                    
                    # 更新模型实例的图片字段并保存
                    file_instance.converted_image = relative_img_path
                    file_instance.save()
                
                # 确保图片存储到MEDIA_ROOT下的converted_files目录
                dest_dir = os.path.join(settings.MEDIA_ROOT, 'converted_files')
                os.makedirs(dest_dir, exist_ok=True)
                src_dir = os.path.dirname(pdf_path)
                move_dir(src_dir, dest_dir, '*.png')
            
            return redirect('app1-display')
    else:
        form = UserUploadForm()
    return render(request, 'app1/home.html', {'form': form})

注意：

• 确保convert_file函数返回转换后的图片完整路径
• 若转换后的图片直接生成在converted_files目录下，可省略move_dir步骤

3. 更新模板，展示转换后的图片 #

修改display.html，使用模型的converted_image.url字段展示图片：

{%extends "app1/base.html"%}
{%load static%}
{%block content%}

    {%if user.is_authenticated%}
        <h2>User: {{request.user.username}}</h2>
    {%endif%}

    {%if images%}
        {%for i in images%}
            {%if i.converted_image%}
                <img src="{{ i.converted_image.url }}" alt="Converted PDF">
            {%endif%}
        {%endfor%}
    {%endif%}
    
{%endblock content%}

4. 配置媒体文件路由 #

在项目根目录的urls.py中添加媒体文件路由，确保Django能正确处理图片URL请求：

from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    # 其他路由配置...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

同时检查settings.py中的媒体配置是否正确：

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

内容的提问来源于stack exchange，提问作者spectre