flask 图片上传 和下载

一 、搞定前端的HTML

1.新建文件夹templates存放html页面

 

 2.写html文件

背景知识1

<ol> 标签中的 for 和 endfor 是模板引擎语法，需要与后端的 Python 文件配合使用才能实现动态生成列表项的功能

背景知识2

复制代码
模板引擎语法的具体语法和功能会因不同的模板引擎而有所差异，以下是一些常见的模板引擎语法：

变量插值：使用 {{ variable }} 语法将变量的值插入到模板中。例如：<h1>{{ title }}</h1>。

条件判断：使用 if 和 else 语句进行条件判断。例如：

{% if condition %}
    <p>条件成立时显示的内容</p>
{% else %}
    <p>条件不成立时显示的内容</p>
{% endif %}
循环：使用 for 和 endfor 语句进行循环。例如：
{% for item in list %}
    <li>{{ item }}</li>
{% endfor %}
过滤器：可以对变量进行一些处理或格式化，例如：
{{ variable|filter }}
继承和包含：可以使用 {% extend %} 和 {% include %} 语句来实现模板的继承和复用。

宏定义：可以使用 {% macro %} 和 {% endmacro %} 语句定义一个宏（类似于函数），以便在模板中多次使用。

这些只是一些常见的模板引擎语法，具体的语法和功能会因使用的模板引擎而有所不同。常见的模板引擎有 Jinja2、Django 模板引擎、Mustache 等
复制代码

第一个html 包含提交按钮的页面

效果

 

 

 

复制代码


复制代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页文件上传</title>
</head>
<body>
    <h2>上传文件</h2>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" class="input">
        <input type="submit" value="上传" class="input button">
    </form>
    <h2>下载文件</h2>
    <ol>
        {% for entry in entries %}
        <!--喂喂喂是大括号包裹啊，不是尖括号--> 
        <li><a href="/files/{{ entry }}">{{ entry }}</a></li>
        <!--必须加上/files/这样才能在浏览器 点击列表中文件名称时 下载成功 ，
         后端修饰符@app.route('/files/<filename>')中的files对应这里的files -->
        {% endfor %}

    </ol>

</body>
</html>


复制代码




 


 


复制代码


第二个上传成功的页面


效果




 结构




 代码


复制代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
    <h1>上传成功</h1>
    <a href="/">返回主页</a>

</body>
</html>


复制代码


二、搞定上传的照片


新建一个文件夹upload,放2个照片到文件夹中


结构




 三、python的falsk框架关联前端的HTML


结构




 背景知识1




from flask import Flask, send_from_directory, render_template, request

# 导入 Flask 框架的 Flask 类，用于创建 Flask 应用程序
# 导入 send_from_directory 方法，用于发送静态文件（如图片、CSS 或 JavaScript）----新知识，需要消化 "从目录发送文件
# 导入 render_template 方法，用于渲染模板文件-----新知识需要消化
# 导入 request 对象，用于处理客户端发送的请求




背景知识2


复制代码


实例化Flask对象


app=Flask(__name__)


解释1：
调用函数时使用的if __name__ == '__main__':和app=Flask(__name__)中的__name__是同一个意思。


__name__是一个特殊变量，它在Python中是一个内置变量，用于表示当前模块的名称。模块就是一个.py文件。
解释2：


if __name__ == '__main__':中 __name__的用法



当一个模块被直接执行时，会将__name__的值设置为'__main__'，而当一个模块被导入时，__name__的值将是模块的名称。

因此，当我们使用if __name__ == '__main__':条件判断时，
我们是在判断当前模块是否被直接执行。
这个条件只在当前模块被直接执行时为True，
而在作为模块被导入时为False。
这样可以确保我们的代码只在模块被直接执行时运行，
而不会在被导入时执行。

所以，__name__在if __name__ == '__main__':中表示当前模块的名称，用于判断模块是否被直接执行


复制代码


背景知识3


复制代码




@app.route('/')#装饰器
def index():# 视图函数
    return 'Hello, World!'



解释
当用户访问应用程序的根路径时
（例如http://localhost:5000/），Flask会调用`index()`函数，并将其返回的字符串"Hello, World!"显示在浏览器中。
我们使用@app.route装饰器来定义视图函数。
@app.route装饰器将URL路径和对应的视图函数绑定在一起。


Flask框架会自动调用相应的视图函数来处理请求，并返回相应的响应内容。


 


复制代码


 背景知识4


复制代码




import os

file_list = os.listdir(path)
解释：


os.listdir是Python中的一个方法，用于获取指定目录中的所有文件和文件夹的名称列表。
类似linux中的ls path ;ls 是list的缩写；

注意：os.listdir只返回指定目录中的直接子项的名称列表，并不会递归获取子目录中的内容。如果需要递归获取所有文件和文件夹的名称列表，可以使用os.walk方法


复制代码


 背景知识5




# 连接两个路径
path1 = "path1"
path2 = "path2"
joined_path = os.path.join(path1, path2)
print(joined_path)  # 输出：path1/path2




背景知识6


复制代码


Flask的request和pytest的request不是同一个东西。

Flask的request是Flask框架提供的request对象。它用于访问传入的请求数据，例如表单数据、查询参数和上传的文件。

而pytest的request是pytest测试框架提供的request夹具（fixture）。它是pytest中的一个特殊夹具，用于访问有关当前运行的测试的信息，例如测试函数、测试模块和测试参数。

尽管它们有相同的名称，但Flask的request和pytest的request具有不同的目的和功能。
---------------------


from flask import Flask, request




app = Flask(__name__)




@app.route('/upload', methods=['POST'])
def upload():
    # 获取上传的文件对象
    file = request.files['file']
    
    # 对文件进行处理
    if file:
        file.save('./uploads/' + file.filename)
        return 'File uploaded successfully.'
    else:
        return 'No file uploaded.'




if __name__ == '__main__':
    app.run()


 


复制代码


 python  代码


复制代码


from flask import Flask,send_from_directory,render_template,request
import os
# 创建一个flask对象，参数__name__指示当前模块的名称,如果不写 Flask程序无法确定应用程序的位置
app=Flask(__name__)
pic_path=r"D:\python-pro\flask_upload_file\upload"

# 浏览器中显示上传文件夹中的文件列表
@app.route('/')
def index():
    # 获取上传文件夹的文件列表
    entries=os.listdir(pic_path)

    return render_template('index.html',entries=entries)
# 用于接收客户端上传的文件，并保存到指定路径
@app.route('/upload',methods=['POST'])
def upload():
    # 获取上传的文件对象
    f=request.files['file']
    # 拼接后的路径
    path = os.path.join(pic_path,f.filename)
    # 保存路径
    f.save(path)

    return render_template('upload.html')
# 用于从指定路径下载文件
@app.route('/files/<filename>') # 浏览器点击列表中文件名称后跳转的路径 <变量以尖括号形式>  目的<包裹你点击的文件名>
def files(filename):# 将你点击的文件名以参数形式传递给 方法files
    return send_from_directory(pic_path,filename,as_attachment=True)# 以附件形式下载
if __name__ == '__main__':
    app.run(debug=True)


复制代码


 






            

            
posted @ 
 
胖豆芽 
阅读(150) 
评论(0) 
编辑 
收藏 
举报


        

        
        




    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                · 
                后端结合前端  模板渲染 显示列表
            

            

                · 
                flask 在网页表单写账号和密码 数据库校验，存在的话 弹欢迎页，不存在的话 添加到数据库，也弹欢迎页
            

            

                · 
                flask  上传文件，视图
            

            

                · 
                flask
            

            

                · 
                flask 框架使用
            

    





    

    阅读排行：
    

 ·          TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
        

 ·          Manus的开源复刻OpenManus初探
        

 ·          AI 智能体引爆开源社区「GitHub 热点速览」
        

 ·          三行代码完成国际化适配，妙~啊~
        

 ·          .NET Core 中如何实现缓存的预热？
        



    

    



    



            

        


        
        

    

    

    




    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
SQL AI 助手