前言:本文是学习网易微专业的《python全栈工程师 - Flask高级建站》课程的笔记,欢迎学习交流。同时感谢老师们的精彩传授!
一、课程目标
- flask-dropzone插件介绍
- flask-dropzone参数配置
- flask-dropzone前端模版
- flask-dropzone后端处理
二、详情解读
2.1.flask-dropzone介绍
2.1.1.flask-dropzone插件
flask-dropzone
,是基于dropzone.js
开发的插件,实现了前端拖拽上传,上传进度显示,上传完成显示的插件,开发人员只需要编写很少的代码就可以完成一个用户体验很好的上传功能。
插件安装:
pipenv install flask-dropzone
安装完成后生成模块flask_dropzone
2.2.flask-dropzone配置
配置参数 | 说明 | 默认值 |
---|---|---|
DROPZONE_MAX_FILE_SIZE | 最大文件上传尺寸,单位MB | 3 |
DROPZONE_INPUT_NAME | 上传域name属性值 | file |
DROPZONE_MAX_FILES | 一次最多上传文件数量 | null |
DROPZONE_DEFAULT_MESSAGE | 默认提示 | “Drop files here to upload” |
DROPZONE_FILE_TOO_BIG | 文件尺寸超过限度提示 | “File is too big {
{filesize}. Max filesize:{ {maxFilessize}}MiB.” |
DROPZONE_SERVER_ERROR | 服务器错误 | “Server error:{ {statusCode}}” |
DROPZONE_MAX_FILE_EXCEED | 一次上传文件数量超限 | “You can’t upload any more files.” |
DROPZONE_UPLOAD_MULTIPLE | 禁止一次上传多个文件 | False |
DROPZONE_REDIRECT_VIEW | 上传完成后是否跳转 | False |
DROPZONE_ALLOWED_FILE_TYPE | 允许文件上传类型 | default |
DROPZONE_ALLOWED_FILE_CUSTOM | 自定义允许上传类型 | 自定义允许上传类型 |
DROPZONE_INVALID_FILE_TYPE | 文件类型错误提示 | “You can’t upload files of this type.” |
DROPZONE_ENABLE_CSRF | 是否启用csrf保护 | False |
DROPZONE_TIMEOUT | 上传超时时间,默认30s | None |
DROPZONE_SERVE_LOCAL | 是否加载本地的js插件资源 | False |
2.2.1.flask-dropzone默认允许文件类型
允许类型配置参数值 | 默认值 |
---|---|
default | image/*, audio/*, video/*, text/*, application/* |
image | image/* |
audio | audio/* |
video | video/* |
text | text/* |
app | application/* |
2.2.2.初始化插件
# libs.py:
from flask_dropzone import Dropzone
dropzone = Dropzone()
# app.py:
dropzone.init_app(app)
实操:
Step1
:修改settings.py
文件,增加flask-dropzone
配置
.
.
.
CKEDITOR_FILE_BROWSER = "upload.ckeditor_browser"
# 新增下面的配置++
# Dropzone配置
DROPZONE_MAX_FILE_SIZE = 3
DROPZONE_MAX_FILES = 30
DROPZONE_ALLOWED_FILE_CUSTOM = True
DROPZONE_ALLOWED_FILE_TYPE = 'image, .jpg, .pdf, .txt'
DROPZONE_ENABLE_CSRF = True
# 上传域名字为upload
DROPZONE_INPUT_NAME = 'upload'
.
.
.
Step2
:修改libs.py
文件:导入flask-dropzone
并实例化
from flask import session, redirect, url_for
from functools import wraps
from flask_wtf.csrf import CSRFProtect
from flask_ckeditor import CKEditor
# 新增下面这一行
from flask_dropzone import Dropzone
# 创建数据库对象
# 这里不用传入app实例对象,因为这里尚未创建app实例
db=SQLAlchemy()
csrf = CSRFProtect()
ckeditor = CKEditor()
# 新增下面这一行
dropzone = Dropzone()
.
.
.
Step3
:修改app.py
文件,导入flask-dropzone
并初始化
from flask import Flask, render_template
from flask import request, redirect, url_for
# 新增下面这一行: 导入dropzone
from libs import db, ckeditor, csrf, dropzone
.
.
.
db.init_app(app)
ckeditor.init_app(app)
csrf.init_app(app)
# 新增下面这一行:初始化dropzone
dropzone.init_app(app)
.
.
.
2.3.前端模版
flask-dropzone
插件与flask-ckeditor
一样,都是基于前端的一些框架开发的后端插件,最后要在模版生成前端插件
可以使用下面代码,加载静态的js
与css
资源
{
{ dropzone.load_css() }}
{
{ dropzone.load_js() }}
{
{ dropzone.style() }} // 自定义样式
2.3.1.使用本地资源
可以Dropzone
官网下载相应的静态资源:
官网地址:dropzonejs.com
官方推荐使用远程CDN
资源
在需要创建上传的区域:
{
{ dropzone.create(action="upload.