Python Flask实现图片上传与下载的示例详解

目录
  • 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 介绍（拖拽）

1、效果预览

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

2、新增逻辑概览

我们在官方指导工程上进行增加代码，改动如下：

由于 flask 官方 Demo 基于蓝图设计，这给我们新增逻辑带来了很大的方便。关于官方 Demo 的介绍，可以参考《Flask 入门（以一个博客后台为例）》

3、tuchuang.py 逻辑介绍

3.1 图片上传

1）该接口采用 POST 方法，需要登录；

2）接着，检查请求中是否有 'file' 关键词，然后取出文件，判断文件是否为空或是否合法；

3）最后，将上传的图片保存（采用秒级别的时间戳+随机数重命名）；

4）该接口在上传图片成功后，返回该图片的链接；如果不成功，返回 upload.html 页面；

@bp.route('/', methods=['GET', 'POST'])
@login_required
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        # If the user does not select a file, the browser submits an
        # empty file without a filename.
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            # 获取安全的文件名 正常文件名
            filename = secure_filename(file.filename)

            # 生成随机数
            random_num = random.randint(0, 100)
            # f.filename.rsplit('.', 1)[1] 获取文件的后缀
            filename = datetime.now().strftime("%Y%m%d%H%M%S") + "_" + str(random_num) + "." + filename.rsplit('.', 1)[1]
            file_path = app.config['UPLOAD_FOLDER']    # basedir 代表获取当前位置的绝对路径

            # 如果文件夹不存在，就创建文件夹
            if not os.path.exists(file_path):
	            os.makedirs(file_path)

            file.save(os.path.join(file_path, filename))
            return redirect(url_for('tuchuang.download_file', name=filename))
    return render_template("tuchuang/upload.html")

3.2 图片合法检查

上述代码中有一个合法检测的函数 allowed_file，用于检查上传图片的后缀是否在允许列表：

basedir = os.path.abspath(os.path.dirname(__file__))                 # 获取当前文件所在目录
UPLOAD_FOLDER = basedir+'/static/file/img'                           # 计算图片文件存放目录
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}     # 设置可上传图片后缀 

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
bp = Blueprint("tuchuang", __name__, url_prefix="/tuchuang")

def allowed_file(filename):                                          # 检查上传图片是否在可上传图片允许列表
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

3.3 图片下载

图片下载比较简单，就是调用 send_from_directory 函数，就能够把 static 目录下的对应文件发出：（我们一般把各种用于外面访问的静态图片、JS、CSS 等放在 static 文件中）

@bp.route('/download/<name>')
def download_file(name):
    return send_from_directory(app.config["UPLOAD_FOLDER"], name)

4、__init__.py 逻辑介绍

由于我们采用蓝图设计，因此需要稍微修改下 __init__.py 文件，来将 tuchuang.py 加入：

  • MAX_CONTENT_LENGTH=16 * 1000 * 1000 上传图片大小限制
  • from flaskr import auth, blog, tuchuang
  • app.register_blueprint(tuchuang.bp) 将 tuchuang 加入蓝图
  • app.add_url_rule("/download/<name>", endpoint="download_file", build_only=True)

5、upload.html 介绍

5.1 upload Jinja 模板介绍

  • Jinja 引用外部 css：<link rel="stylesheet" href="{{ url_for('static', filename='file/css/upload.css') }}">
  • Jinja 引用外部 js：<script type="text/javascript" src="{{ url_for('static', filename='file/js/upload.js') }}"></script>
  • 该 Jinja 模板实现了两种图片上传交互：

普通版，采用 file select 框 + submit 按钮，实现图片上传：

<form method=post enctype=multipart/form-data>
    <input type=file name=file>
    <input type=submit value=Upload>
</form>

拖拽版（需要借助 JS，CSS），在 <div id="drop-area"> 内实现

下面是 tuchuang/upload.html 完整代码：

<!doctype html>
<link rel="stylesheet" href="{{ url_for('static', filename='file/css/upload.css') }}" rel="external nofollow" >
<script type="text/javascript"  src="{{ url_for('static', filename='file/js/upload.js') }}"></script>
<title>Upload new File</title>
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
    <input type=file name=file>
    <input type=submit value=Upload>
</form>
<div id="drop-area">
    <form class="my-form">
        <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
        <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
        <label class="button" for="fileElem">Select some files</label>
        <div id="gallery"></div>
        <progress id="progress-bar" max=100 value=0></progress>
    </form>
</div>

5.2 upload css 介绍（虚线框）

下面是拖拽需要用到的 CSS，大家暂时浏览下，之后结合 JS 就明白了：

#drop-area {
    border: 2px dashed #ccc;
    border-radius: 20px;
    width: 480px;
    font-family: sans-serif;
    margin: 100px auto;
    padding: 20px;
}
#drop-area.highlight {
    border-color: purple;
}
p {
    margin-top: 0;
}
.my-form {
    margin-bottom: 10px;
}
#gallery {
    margin-top: 10px;
}
#gallery img {
    width: 150px;
    margin-bottom: 10px;
    margin-right: 10px;
    vertical-align: middle;
}
.button {
    display: inline-block;
    padding: 10px;
    background: #ccc;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.button:hover {
    background: #ddd;
}
#fileElem {
    display: none;
}

5.3 upload js 介绍（拖拽）

5.3.1 JS 拖拽框架

JS 代码主要基于 window.onload + 拖拽事件实现，大致框架如下：

window.onload=function(){
    var dropArea = document.getElementById('drop-area')

    // 阻止默认行为
    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false)
    })

    function preventDefaults (e) {
        e.preventDefault()
        e.stopPropagation()
    }

    // 增加事件，鼠标拖入边框高亮，拖出边框变为原来样子
    ;['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false)
    })

    ;['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false)
    })

    function highlight(e) {
        dropArea.classList.add('highlight')
    }

    function unhighlight(e) {
        dropArea.classList.remove('highlight')
    }

    // 增加事件，鼠标放下，之后准备上传图片
    dropArea.addEventListener('drop', handleDrop, false)

    function handleDrop(e) {
    	// 之后准备上传图片
    }
}

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

5.3.2 JS 图片上传

function handleDrop(e) {
	// 从拖拽放下事件中获取拖拽的文件
    let dt = e.dataTransfer
    let files = dt.files

	// 调用图片处理函数，对图片进行处理
    handleFiles(files)
}

function handleFiles(files) {
	// 对于多个图片，循环调用 uploadFile 函数，进行上传
    ([...files]).forEach(uploadFile)
}

function uploadFile(file) {
	// JS 合成表单，利用 POST 方法，实现上传（部署在远端时，要改下下面的 url）
    let url = 'http://127.0.0.1:5000/tuchuang/'
    let formData = new FormData()

    formData.append('file', file)

    fetch(url, {
        method: 'POST',
        body: formData
    })
        .then(progressDone) // <- Add `progressDone` call here
        .catch(() => { /* Error. Inform the user */ })
}

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。详细介绍参考JavaScript使用Fetch的方法详解

  • 1.进行 fetch 请求 参考；
  • 2.支持的请求参数参考；
  • 3.发送带凭据的请求参考；
  • 4.上传 JSON 数据参考；
  • 5.上传文件参考；
  • 6.上传多个文件参考；
  • 7.检测请求是否成功参考；
  • 8.自定义请求对象参考；
  • 9.Headers参考；
  • 10.Guard参考；
  • 11.Response 对象参考；
  • 12.Body参考；
  • 13.特性检测参考；

该文章讲的比较好，大家可以跳转过去学习下～

5.3.3 JS 图片上传进度条

想要带有进度条，我们需要修改下 handleFiles 函数：

var filesDone = 0
var filesToDo = 0
var progressBar = document.getElementById('progress-bar')

...

// 预览
function previewFile(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onloadend = function() {
        let img = document.createElement('img')
        img.src = reader.result
        document.getElementById('gallery').appendChild(img)
    }
}

// 进度条初始化，fileDone 置 0，filesToDo 置需要上传图片总数
function initializeProgress(numfiles) {
    progressBar.value = 0
    filesDone = 0
    filesToDo = numfiles
}

// 注意，该函作为 fetch 的返回回调函数，意思是每次传输完成一个图片，进度条进行相应变化
function progressDone() {
    filesDone++
    progressBar.value = filesDone / filesToDo * 100
}

function handleFiles(files) {
    files = [...files]
    initializeProgress(files.length)
    files.forEach(uploadFile)
    files.forEach(previewFile)
}

到此这篇关于Python Flask实现图片上传与下载的示例详解的文章就介绍到这了,更多相关Python Flask图片上传下载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Python flask的前后端交互

    详解Python flask的前后端交互

    目录 前端 index.html script.js 后端 app.py 总结 场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示. 按下按钮之前: 按下按钮之后: 代码结构 这是flask默认的框架(html写在templates文件夹内.css和js写在static文件夹内) 前端 index.html 很简单的一个select下拉选框,一个按钮和一个文本,这里的 {{ temp }} 是从后端调用的. <html> <head> <meta

  • python 实现Flask中返回图片流给前端展示

    场景需求:需要在Flask服务器的本地找一张图片返回给前端展示出来. 问题疑点:通常前端的<img>标签只会接受url的形式来展示图片,没试过在返回服务器本地的一张图片给前端. 因此写个记录一下这个看起来有点奇葩的场景(通常个人博客,个人网站没有钱用第三方的服务都会采用存储在服务器本地的方法啦.) 项目目录: dyy_project | |----static (新建flask项目时自动建的,没有任何文件) |----templates |-----index.html (前端页面) |---

  • python 解决flask 图片在线浏览或者直接下载的问题

    目前是把图片存在mongodb数据库,实现一个方法,比如 访问 /get_pic/ID 能实现图片在浏览器打开,添加了一个状态,比如?filename=1.png,实现图片直接下载, 需要在读取图片函数中,给response 加上headers: 在 flask 中 response=make_response(f.read()) 需要下载就添加以下headers 当filename为中文时会报asicc编解码错误, 此时,import urllib (py3) filename=urllib.

  • Python Flask入门

    Python Flask入门

    目录 主页 分析代码: 修改视图函数返回值 修改 URL 规则 修改视图函数名 总结 追溯到最初,Flask 诞生于 Armin Ronacher 在 2010 年愚人节开的一个玩笑.后来,它逐渐发展成为一个成熟的 Python Web 框架,越来越受到开发者的喜爱. Flask 是典型的微框架,作为 Web 框架来说,它仅保留了核心功能:请求响应处理和模板渲染.这两类功能分别由 Werkzeug(WSGI 工具库)完成和 Jinja(模板渲染库)完成. 主页 主页的 URL 一般就是根地址,即

  • 使用python flask框架开发图片上传接口的案例详解

    使用python flask框架开发图片上传接口的案例详解

    python版本:3.6+ 需要模块:flask,pillow 需求:开发一个支持多格式图片上传的接口,并且将图片压缩,支持在线预览图片. 目录结构: app.py编辑内容: from flask import Flask, request, Response, render_template from werkzeug.utils import secure_filename import os import uuid from PIL import Image, ExifTags app =

  • Python Flask实现图片上传与下载的示例详解

    Python Flask实现图片上传与下载的示例详解

    目录 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 介绍(拖拽) 1.效果预览 我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下: 2.新增逻辑概览 我们在官方指导工程上进行增加代码,改动如下: 由于 fl

  • Java实现文件上传和下载的方法详解

    目录 1.文件上传 1.1 介绍 1.2 代码实现 2.下载 2.1 介绍 2.2 代码实现 1.文件上传 1.1 介绍 文件上传,也称为upload,是指将本地图片.视频.音频等文件上传到服务器上,可以供其他用户浏览或下载的过程.文件上传在项目中应用非常广泛,我们经常发微博.发微信朋友圈都用到了文件上传功能. 文件上传时,对页面的form表单有如下要求: 表单属性 取值 说明 method post 必须选择post方式提交 enctype multipart/form-data 采用mult

  • SpringBoot文件上传与下载功能实现详解

    目录 前言 1.引入Apache Commons FileUpload组件依赖 2.设置上传文件大小限制 3.创建选择文件视图页面 4.创建控制器 5.创建文件下载视图页面 前言 文件上传与下载是Web应用开发中常用的功能之一,在实际的Web应用开发中,为了成功上传文件,必须将表单的method设置为post,并将enctype设置为multipart/form-data 只有这样设置,浏览器才能将所选文件的二进制数据发送给服务器 从Servlet3.0开始,就提供了处理文件上传的方法,但这种文

  • .NetCore实现上传多文件的示例详解

    .NetCore实现上传多文件的示例详解

    本章和大家分享的是.NetCore的MVC框架上传文件的示例,主要讲的内容有:form方式提交上传,ajax上传,ajax提交+上传进度效果,Task并行处理+ajax提交+上传进度,相信当你读完文章内容后能后好的收获,如果可以不妨点个赞:由于昨天电脑没电了,快要写完的内容没有保存,今天早上提前来公司从头开始重新,断电这情况的确让人很头痛啊,不过为了社区的分享环境,这也是值得的,不多说了来进入今天的正篇环节吧: form方式上传一组图片 先来看看咋们html的代码,这里先简单说下要上传文件必须要

  • Ajax实现上传图像功能的示例详解

    Ajax实现上传图像功能的示例详解

    最终效果展示 xhr发起请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt

  • JavaScript获取上传文件相关信息示例详解

    目录 前题场景 处理方式 图片文件 音频文件 判断处理 分析总结 前题场景 在开发过程中,文件上传是再熟悉不过的场景了,但是根据实际使用情况对上传文件的限制又各有不同.需要对本地上传文件进行相应的限制处理,防止不符合规则或者要求的文件上传到云存储中,从而造成云盘资源空间浪费. 与此同时,也在给客户端使用文件信息之前做了一次数据过滤处理,减少客户端对文件资源的处理和校验. 处理方式 因为客户端使用后台管理上传的图片文件和音频文件时,为了优化展示效果和加载的速度,所以在后台管理系统上传处希望依据图片

  • js前端上传文件缩略图技巧示例详解

    目录 引言 文件对象简介 Blob File FileReader FormData 文件对象之间的关系 缩略图的实现 总结 引言 通常情况下,前端提交给服务器的数据格式为JSON格式,但很多时候用户想上传自己的头像.视频等,这些非文本数据的时候,就不能直接以JSON格式上传到后端了. 当我们要获取用户上传的文件,可以使用input表单项,将type属性值设置为“file”. <form action=""> <input type="file"

  • TypeScript前端上传文件到MinIO示例详解

    目录 什么是MinIO? 本地Docker部署测试服务器 上传的API TypeScript实现 1. XMLHttpRequest 2. Fetch API 3. Axios 从后端获取临时上传链接 上传文件 踩过的坑 1. presignedPutObject方式上传提交的方法必须得是PUT 2. 直接发送File即可 3. 使用Axios上传的时候,需要自己把Content-Type填写成为file.type 示例代码 什么是MinIO? MinIO 是一款高性能.分布式的对象存储系统.

  • 微信小程序学习笔记之文件上传、下载操作图文详解

    微信小程序学习笔记之文件上传、下载操作图文详解

    本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun

  • springmvc图片上传及json数据转换过程详解

    springmvc图片上传及json数据转换过程详解

    springmvc的图片上传 1.导入相应的pom依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> 2.添加springmvc-servlet.xml里面的配置 <bean id=&q

随机推荐