我想实现从本地上传图片到网页前端,并且将上传的图片保存在image文件下。写好代码后在前端页面运行出错。
下面是我的代码逻辑。(很大一部分借助了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表单呢