Python学习笔记：6.3.12 flask-dropzone插件

前言：本文是学习网易微专业的《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.dropzone_upload")}}

使用&