使用Django内置表单上传图片

时间:2018-10-13 15:51:56

标签: python django

我正在尝试使用Django内置表单上传图像,但似乎无法真正存储该图像。表单功能正常,可以在其中浏览文件并提交表单(表单中的所有其他内容都会发布并保存),但是图像不会保存到“ media / images”文件夹中

我在这里想念什么?

models.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'

forms.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")

表单-由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 %}

1 个答案:

答案 0 :(得分:1)

您在表单标记中缺少一个必需的属性。通过将您的打开表单标签设置为<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>