在Web开发中，使用Flask框架实现图片上传功能是一种常见且实用的需求。Flask作为一个轻量级的Python Web框架，提供了简洁的接口来处理文件上传请求。 ### 基本步骤 1. **设置Flask应用结构** 首先需要创建一个Flask应用，并定义基本的路由和模板目录结构。通常会包含一个用于展示上传表单的页面（如`index.html`）和一个接收上传文件的视图函数。 2. **创建HTML上传表单** 在前端页面中，使用 `<input type="file">` 元素让用户选择要上传的图片文件，并通过 `enctype="multipart/form-data"` 设置确保文件数据能被正确发送到服务器端。 3. **处理上传请求** 在Flask后端，通过 `request.files` 获取上传的文件对象。可以对文件进行验证（如检查是否为图像格式、大小限制等），并将其保存到指定目录。 4. **配置上传文件夹与安全性** 为避免安全问题，应使用 `werkzeug.utils.secure_filename()` 对上传文件名进行清理，防止路径遍历攻击。同时，需在Flask应用中配置上传文件夹路径。 5. **返回响应** 文件成功保存后，可以通过重定向或JSON响应告知用户上传结果。 ### 示例代码 #### Flask后端代码 (`app.py`) ```python from flask import Flask, request, redirect, url_for, render_template from werkzeug.utils import secure_filename import os app = Flask(__name__) app.config['UPLOAD_FOLDER'] = 'uploads/' app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'} def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS'] @app.route('/', methods=['GET', 'POST']) def upload_file(): if request.method == 'POST': # 检查是否有文件被上传 if 'file' not in request.files: return "没有文件部分" file = request.files['file'] # 如果用户未选择文件，浏览器提交空文件名 if file.filename == '': return "未选择文件" if file and allowed_file(file.filename): filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) return redirect(url_for('upload_file')) return render_template('index.html') ``` #### 前端HTML模板 (`templates/index.html`) ```html <!doctype html> <html> <head><title>图片上传</title></head> <body> <h2>上传图片</h2> <form method="post" enctype="multipart/form-data"> <input type="file" name="file"><br><br> <input type="submit" value="上传"> </form> </body> </html> ``` ### 注意事项 - 确保运行前已安装Flask：`pip install flask` - 创建 `uploads/` 目录用于存储上传的图片。 - 可根据需求扩展功能，例如支持拖拽上传（结合HTML5的Drag & Drop API）[^1]，或添加文件预览功能。 ---