如何用Flask实现支持拖拽上传的图片上传下载功能?
摘要:1、效果预览 我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下: 2、新增逻辑概览 我们在官方指导工程 https:github.compalletsflasktree2.1.1examplestuto
目录1、效果预览2、新增逻辑概览3、tuchuang.py 逻辑介绍3.1 图片上传3.2 图片合法检查3.3 图片下载4、__init__.py 逻辑介绍5、upload.html 介绍5.1 upload Jinja 模板介绍5.2 upload css 介绍(虚线框)5.3 upload js 介绍(拖拽)5.3.1 JS 拖拽框架5.3.2 JS 图片上传5.3.3 JS 图片上传进度条6、后记参考链接
1、效果预览
我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下:
2、新增逻辑概览
我们在官方指导工程 https://github.com/pallets/flask/tree/2.1.1/examples/tutorial/flaskr 上进行增加代码,改动如下:
➜ flaskr git:(main) ✗ tree
.
├── static
│ ├── file
│ │ ├── css
│ │ │ └── upload.css <- 增加图片上传的 CSS
│ │ ├── img
│ │ │ ├── 20220525004341_22.png
│ │ │ └── 20220529231518_76.png
│ │ └── js
│ │ └── upload.js <- 增加图片上传的 JS
│ └── style.css
├── templates
│ ├── auth
│ │ ├── login.html
│ │ └── register.html
│ ├── base.html
│ ├── blog
│ │ ├── create.html
│ │ ├── index.html
│ │ └── update.html
│ └── tuchuang <- 增加图片上传的 html
│ └── upload.html
├── auth.py
├── blog.py
├── db.py
├── __init__.py
├── schema.sql
└── tuchuang.py <- 增加图床 python 蓝图
9 directories, 18 files
由于 flask 官方 Demo 基于蓝图设计,这给我们新增逻辑带来了很大的方便。
