如何通过 Django 中的 HTML 表单将图像上传到数据库？

Question

我正在使用 Django 创建博客。我创建了一个 html 表单，用户可以在其中向他/她的博客添加标题和内容，并将博客的图片上传到数据库。

HTML 表单

    <form method="post" action="/addPost" class="container my-4">
        {% csrf_token %}
        <div class="mb-3">
            <label class="form-label">Blog Title</label>
            <input type="text" name="blogTitle" required class="form-control">
        </div>
        <div class="mb-3">
            <label class="form-label">Blog Image (Optional)</label>
            <input class="form-control" type="file" name="blogImg">
        </div>
        <div class="mb-3">
            <label class="form-label">Blog Content</label>
            <textarea class="form-control" name="blogContent" required rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
    </form>

当我尝试通过管理面板上传图片时，我可以轻松上传图片，但是当我尝试通过 html 表单上传图片时，我无法这样做。

博文模型

    class BlogPost(models.Model):
        Sno = models.AutoField(primary_key=True)
        Writer = models.ForeignKey(User, on_delete=models.CASCADE)
        BlogImage = models.ImageField(upload_to="static/img", blank=True)
        BlogTitle = models.CharField(max_length=1000)
        BlogContent = models.TextField()
        Slug = models.SlugField(default='')
        Date = models.DateTimeField()

添加博客发布功能

    def addPost(request):
        if request.user.is_authenticated:
            if request.method == "POST":
                image = request.POST.get("blogImg")
                title = request.POST.get("blogTitle")
                content = request.POST.get("blogContent")
                user = request.user
                slug = str(title).lower().replace(" ", "-")
                datetime = now()
                
                BlogPost.objects.create(Writer=user, BlogImage=image, BlogTitle=title, BlogContent=content, Slug=slug, Date=datetime)
                return redirect("/")
            return render(request, "addBlogPost.html")
        else:
            return HttpResponse("404 not found")

应用的urls.py

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

urlpatterns = [
    path("", views.index, name="Main"),
    path("addPost", views.addPost, name="addPost"),
    path("signup", views.signUp, name="signUp"),
    path("logout", views.Logout, name="Logout"),
    path("login", views.Login, name="Login"),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

我应该怎么做也通过html表单上传文件，以便它们也保存在静态文件夹中？

Answer 1

您必须在包含图像/文件上传的表单 html 中包含 enctype="multipart/form-data" 属性。

<form method="post" enctype="multipart/form-data" action="/addPost" class="container my-4">
    {% csrf_token %}
    <div class="mb-3">
        <label class="form-label">Blog Title</label>
        <input type="text" name="blogTitle" required class="form-control">
    </div>
    <div class="mb-3">
        <label class="form-label">Blog Image (Optional)</label>
        <input class="form-control" type="file" name="blogImg">
    </div>
    <div class="mb-3">
        <label class="form-label">Blog Content</label>
        <textarea class="form-control" name="blogContent" required rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
</form>

编辑你的views.py 更改以下内容

image = request.POST.get("blogImg")

到

image = request.FILES.get("blogImg")

如果这不起作用 您可能还需要将 MEDIA_ROOT 和 MEDIA_URL 添加到 settings.py 并将您的 url 模式更改为此

urlpatterns = [
    path("", views.index, name="Main"),
    path("addPost", views.add_post, name="addPost"),
    path("signup", views.signUp, name="signUp"),
    path("logout", views.Logout, name="Logout"),
    path("login", views.Login, name="Login"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Answer 2

好吧，基本上我认为您的问题来自您的 html，您忘记将 accept="image/*" 添加到您的图像字段。我就是这样做的，所以它应该可以工作。

 <form method="post" action="" class="container my-4">
        {% csrf_token %}
        <div class="mb-3">
            <label class="form-label">Blog Title</label>
            <input type="text" name="blogTitle" id="id_blogTitle" required class="form-control">
        </div>
        <div class="mb-3">
            <label class="form-label">Blog Image (Optional)</label> <!--You omitted accept="image/*"-->
            <input class="form-control" type="file" name="blogImg" id=id_blogImg accept="image/*">
        </div>
        <div class="mb-3">
            <label class="form-label">Blog Content</label>
            <textarea class="form-control" name="blogContent" id="id_blogContent" required rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
    </form>

查看您的上传 view.py，我注意到您在该字段中有日期时间，这可能是一个问题，而且我没有将 id 变量放入模板中，这也可能导致它无法正常工作。

 def addPost(request):
     if request.method == "POST":
        image = request.POST.get("blogImg")
        title = request.POST.get("blogTitle")
        content = request.POST.get("blogContent")
        slug = str(title).lower().replace(" ", "-")
        blog_data = BlogPost(Writer=user, BlogImage=image, 
                             BlogTitle=title, BlogContent=content,Slug=slug)
        blog_data.save()
        form = BlogPostForm(request.POST, request.FILES)
        if form.is_valid():
           form.save()
           return redirect("/")
        return render(request, "addBlogPost.html")
    else:
        return HttpResponse("404 not found")

好的，我将创建表单来处理博客对象上传，请确保在您的项目中创建 form.py 文件。

class BlogPostForm(form.ModelForm):
      class Meta:
      model = BlogPost
      fields = ['BlogImage',' Writer','BlogTitle','BlogContent','Slug']