[python][flask] Flask 图片上传与下载例子(支持漂亮的拖拽上传)

1、效果预览

我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下:

[python][flask] 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 基于蓝图设计,这给我们新增逻辑带来了很大的方便。关于官方 Demo 的介绍,可以参考我的《Flask 入门(以一个博客后台为例)

3、tuchuang.py 逻辑介绍

3.1 图片上传

1)该接口采用 POST 方法,