使用django开发从本地上传图片到网页,但是点击上传按钮后出现Forbidden (403) CSRF verification failed. Request aborted.错误。

我想实现从本地上传图片到网页前端,并且将上传的图片保存在image文件下。写好代码后在前端页面运行出错。

img

下面是我的代码逻辑。(很大一部分借助了chatgpt,哈哈)
models.py文件:

from django.db import models

class UploadImageForm(models.Model):
    title = models.CharField(max_length=50)#存储图片标题
    image = models.ImageField(upload_to="image")

    def __str__(self):
        return self.title

forms.py文件

from django import forms
from Re_DB.models import UploadImageForm

class ImageUploadForm(forms.ModelForm):
    class Meta:
        model = UploadImageForm
        fields = ('title', 'image',)


views.py文件:

from django.shortcuts import render
from Re_DB.forms import ImageUploadForm

def upload_image(request):
    if request.method == 'POST':
        form = ImageUploadForm(request.POST, request.FILES)# 如果是POST请求,将请求的数据绑定到表单对象中
        if form.is_valid(): # 如果表单数据有效
            form.save() # 保存上传的图片到数据库中
            return render(request, 'voltage.html', {'form': form})# 返回页面并显示上传的图片
    else:
        # 如果请求方法不是POST,创建一个空白的表单对象
        form = ImageUploadForm()
    return render(request, 'voltage.html', {'form': form})

路由:

path('upload_image/', upload_image, name='upload_image')

前端html:

<div id="dis_pic" class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <img style="width: 500px;" src="{{ form.instance.image.url }}" alt="上传的图片">
                div>
            div>
        div>
        <div id="b_submit" class="col-md-9">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form.as_p }}
                <input type="file" id="fileInput" name="fileInput">
                <input type="submit" value="上传">
            form>
        div>

也询问了chatgpt,它让我在视图文件里添加

from django.views.decorators.csrf import csrf_protect, ensure_csrf_cookie
@ensure_csrf_cookie
@csrf_protect

我也试了,没啥用。
有没有老哥能帮助我看看这是哪里出问题了,html里面的img标签需不需要套一个form表单呢

csrf验证问题,看起来你的form表单里也加了验证字段,但是你的form标签没有action属性,你提交到哪了?加个action属性,属性值就是你要提交的后台链接

img