Skip to main content
 首页 » 编程设计

python之使用 Django 内置表单上传图像

2024年12月31日26lonelyxmas

我正在尝试使用 Django 内置表单上传图像,但似乎无法实际存储图像。表单按预期运行,我可以在其中浏览文件并提交表单(表单中的所有其他内容都已发布并保存),但图像没有保存到“媒体/图像”文件夹中

我在这里错过了什么?

模型.py

from django.db import models 
from django.conf import settings 
from django.contrib.auth.models import AbstractUser 
from django.db.models.signals import post_save 
from django.db.models.signals import pre_save 
from django.core.files.storage import FileSystemStorage 
 
class CustomUser(AbstractUser): 
    customerTag = models.CharField(max_length=50,) 
    deviceSerial= models.CharField(max_length=50,) 
    image = models.ImageField(upload_to='images/', blank = True) 
    #also tried: image = models.ImageField(upload_to='media/', blank = True) 

views.py

from django.contrib.auth.forms import UserCreationForm 
from django.urls import reverse_lazy 
from django.views import generic 
from django.views.generic.edit import CreateView 
from . import models 
from .models import CustomUser 
from .forms import addNewEquipmentForm 
from django.core.files.storage import FileSystemStorage 
 
class addEquipment(generic.CreateView): 
    form_class = addNewEquipmentForm 
    success_url = reverse_lazy('login') 
    template_name = 'add_equipment.html' 

表单.py

from django import forms 
from django.contrib.auth.forms import UserCreationForm, UserChangeForm 
from .models import CustomUser 
 
class addNewEquipmentForm(UserCreationForm): 
    class Meta(UserCreationForm.Meta): 
        model = CustomUser 
        fields = ('username', 'email', 'customerTag', 'deviceSerial','image', ) 

urls.py

from django.urls import path, include 
from . import views 
from django.conf.urls.static import static 
from django.conf import settings 
 
urlpatterns = [ 
    #path('', views.home), 
    path('login/', include('django.contrib.auth.urls')),#django powered login page 
    path('newequipment/',views.addEquipment.as_view(), name='newEquipment'), 
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT) 

settings.py

STATIC_URL = '/static/' 
 
MEDIA_URL = '/media/' 
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 
 
STATICFILES_DIRS = [ 
    os.path.join(BASE_DIR, "static") 
] 
 
STATIC_ROOT = os.path.join(BASE_DIR, "static_files") 

form - 由 Django 生成: 抱歉格式问题,我是 HTML 的新手...

<head> 
 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, 
  initial-scale=1, shrink-to-fit=no"> 
 
  <link rel="stylesheet"  
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/ 
  bootstrap.min.css" integrity="sha384-MCw98 
  /SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"  
  crossorigin="anonymous"> 
 
</head> 
<body> 
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> 
    <a class="navbar-brand" href="/">PolySense Solutions</a> 
 
    <ul class="navbar-nav mr-auto"> 
    </ul> 
 
<button class="navbar-toggler" type="button" data-toggle="collapse" \=""  
    data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-  
    expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-  
    target="#navbarCollapse" aria-controls="navbarCollapse" aria-  
    expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button> 
<div class="collapse navbar-collapse" id="navbarCollapse"> 
 
<ul class="navbar-nav ml-auto"> 
    <li class="nav-item"> 
    <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-  
    toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    admin 
 </a> 
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu"> 
<a class="dropdown-item" href="/accounts/login/password_change/">Change  
password</a> 
<div class="dropdown-divider"></div> 
 <a class="dropdown-item" href="/accounts/login/logout/"> 
Log out</a> 
</div> 
</li> 
</ul> 
</div> 
</nav> 
<div class="container"> 
<div class="container"> 
<br> 
<form method="post"> 
<input type="hidden" name="csrfmiddlewaretoken"  
value="Yi8mpT2rqDGs8ncI05ePMoi4QECBQLPZ3JTKGRbZi1z0VP5nyWPIo7jZvxurx9tA"> 
<div id="div_id_username" class="form-group"> <label for="id_username"  
class="col-form-label  requiredField"> 
Username<span class="asteriskField">*</span> </label> <div  
class=""> <input type="text" name="username" maxlength="150" autofocus=""  
class="textinput textInput form-control" required="" id="id_username">  
<small id="hint_id_username" class="form-text text-muted">Required. 150  
characters or fewer. Letters, digits and @/./+/-/_ only.</small> </div>  
</div> <div id="div_id_email" class="form-group"> <label for="id_email"  
class="col-form-label "> 
            Email address 
        </label> <div class=""> <input type="email" name="email"  
 maxlength="254" class="emailinput form-control" id="id_email"> </div>  
</div>  
<div id="div_id_customerTag" class="form-group"> <label  
for="id_customerTag"  
class="col-form-label  requiredField"> 
            CustomerTag<span class="asteriskField">*</span> </label> <div  
class=""> <input type="text" name="customerTag" maxlength="50"  
class="textinput textInput form-control" required="" id="id_customerTag">  
</div> </div> <div id="div_id_deviceSerial" class="form-group"> <label  
for="id_deviceSerial" class="col-form-label  requiredField"> 
            DeviceSerial<span class="asteriskField">*</span> </label> <div  
class=""> <input type="text" name="deviceSerial" maxlength="50"  
class="textinput textInput form-control" required="" id="id_deviceSerial">  
</div> </div> <div id="div_id_equipment" class="form-group"> <label  
for="id_equipment" class="col-form-label  requiredField"> 
 
</select> </div> </div> <div id="div_id_image" class="form-group"> <label  
for="id_image" class="col-form-label "> 
            Image 
        </label> <div class=""> <input type="file" name="image"  
accept="image/*" class="clearablefileinput" id="id_image"> </div> </div>  
<div id="div_id_password1" class="form-group"> <label for="id_password1"  
class="col-form-label  requiredField"> 
            Password<span class="asteriskField">*</span> </label> <div  
class=""> <input type="password" name="password1"  
class="textinput textInput  
form-control" required="" id="id_password1"> <small id="hint_id_password1"  
class="form-text text-muted"><ul><li>Your password can't be too similar to  
your other personal information.</li><li>Your  
password must contain at least  
8 characters.</li><li>Your password can't be a commonly used password.  
</li>  
<li>Your password can't be entirely numeric.</li></ul></small> </div>  
</div>  
<div id="div_id_password2" class="form-group"> <label for="id_password2"  
class="col-form-label  requiredField"> 
            Password confirmation<span class="asteriskField">*</span>  
</label> <div class=""> <input type="password" name="password2"  
class="textinput textInput form-control" required="" id="id_password2">  
<small id="hint_id_password2" class="form-text text-muted">Enter the same  
password as before, for verification.</small> </div> </div> 
 
<button class="btn btn-success" type="submit">Sign up</button> 
</form> 
</div> 
</div> 

用于生成表单的模板:

{% extends 'base.html' %} 
{% load crispy_forms_tags %} 
 
<title>Create New Equipment</title> 
 
{% block body %} 
<div class="container"> 
  <br> 
  <form method="post"> 
  {% csrf_token %} 
  {{ form|crispy }} 
  <button class="btn btn-success" type="submit">Sign up</button> 
  </form> 
</div> 
{% endblock %} 

请您参考如下方法:

您在表单标记中缺少一个必需的属性。通过将您的开始表单标签设置为 <form method="post" enctype="multipart/form-data">您的图像应该被保存。

<form method="post" enctype="multipart/form-data"> 
    {% csrf_token %} 
    {{ form|crispy }} 
    <button class="btn btn-success" type="submit">Sign up</button> 
</form>