前言

学无止境，无止境学。大家好，我是张大鹏，之前在抖音有5万多粉丝，不过现在不拍视频，专心写公众号了。笔者目前是高级Python工程师，之前是全栈工程师，主要擅长Golang和Python开发，对于Java，Vue，React也有一些研究。工作之余，喜欢学习和分享，希望能够通过此公众号”张大鹏520″，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

今天要给大家分享的是《Django加Vue电商项目实战09 表单文件上传实战》，这是一个系列的教程，从零基础到项目实战。在本教程中，我会给大家介绍Django的表单文件上传实战的一个案例。主要包括模型创建，表单创建，表单校验，媒体文件配置等。还会配套相关的练习，大家学完以后可以自行通过练习题巩固和加深对知识点的理解。

如果大家需要本教程的PDF电子书或者完整的源码，可以在文末找到获取方式哈。

表单文件上传实战

数据库配置

引入zdppy_mysql引擎：

import zdppy_mysql

zdppy_mysql.install_as_MySQLdb()

配置数据库：

# 数据库信息
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django_shop',  # 数据库名
        'USER': 'root',  # 用户名
        'PASSWORD': 'root',  # 密码
        'HOST': '192.168.33.12',  # 主机
        'PORT': '3306',
        # 取消外键约束，否则多对多模型迁移报django.db.utils.IntegrityError: (1215, 'Cannot add foreign key constraint')
        'OPTIONS': {
            "init_command": "SET foreign_key_checks = 0;",
            'charset': 'utf8'
        },
    }
}

日志配置：

# 配置日志
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    # 日志处理器
    'handlers': {
        # 控制台日志处理器
        'console': {
            'level': 'DEBUG',
            'class': 'logging.StreamHandler',
        },
    },
    'loggers': {
        # SQL语句输出到控制台
        'django.db.backends': {
            'handlers': ['console'],
            'propagate': True,
            'level': 'DEBUG',
        },
    }
}

媒体文件配置

配置文件存储目录：

# 文件配置
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_URL = '/static/'
if not DEBUG:
    STATIC_ROOT = BASE_DIR / 'static'
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

配置文件路由：

from django.contrib import admin
from django.urls import path, include, re_path
from django.views.static import serve

from . import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("index.urls")),
    # 配置媒体文件目录
    re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT})
]

模型设计

设计模型：

from django.db import models


class ImgFile(models.Model):
    """文件模型"""
    # 文件名称
    name = models.CharField(verbose_name='名称', default='', max_length=30)
    # 文件地址
    headimg = models.FileField(verbose_name='路径', upload_to="uploads/")

    def __str__(self):
        return str(self.name)

    class Meta:
        verbose_name = '用户头像信息'
        db_table = 'user_img'

迁移模型：

python manage.py makemigrations
python manage.py migrate

路由设计

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    # 上传图片
    path('upload_img/', views.upload_img, name='upload_img'),
]

表单设计

import re

from django import forms
from django.core.exceptions import ValidationError

class ImgFileForm(forms.Form):
    """图片上传表单"""
    # 图片名称
    name = forms.CharField()
    # 文件地址
    headimg = forms.FileField()

视图函数

import os

from django.http import HttpResponse
from django.shortcuts import render

from .forms import UserInfoForm, UserInfoValidateForm, ImgFileForm
from .models import ImgFile

def upload_img(request):
    if request.method == "GET":
        # 渲染页面
        f = ImgFileForm()
        return render(request, "upload_img.html", {'form_obj': f})
    else:
        # 校验表单数据并保存
        f = ImgFileForm(request.POST, request.FILES)
        if f.is_valid():
            # 获取数据
            name = f.cleaned_data['name']
            headimg = f.cleaned_data['headimg']
            # 创建文件模型并保存
            userimg = ImgFile()
            userimg.name = name
            userimg.headimg = headimg
            userimg.save()
            # 渲染页面
            print("上传成功")
            return render(request, "upload_img.html", {'form_obj': f, 'user': userimg})

模板

<form enctype="multipart/form-data" action="{% url 'index:upload_img' %}" method="post">
    {% csrf_token %}
    {{ form_obj.as_p }}
    <br/>
    <input type="submit" value="文件上传"/>
    <img src="/media/{{ user.headimg }}">
</form>