如何用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 基于蓝图设计,这给我们新增逻辑带来了很大的方便。
阅读全文