在Flask应用开发中，图片动态更新与上传是常见需求，客户端定时刷新能及时获取最新图片，服务器端文件管理则保障存储资源合理利用，下面介绍完整实现方案。
服务器端实现
基础环境准备
首先需要安装Flask依赖，同时导入必要的模块，用于处理文件上传、路径操作和定时清理任务。
from flask import Flask, request, jsonify, send_from_directory
import os
import time
from datetime import datetime
app = Flask(__name__)
# 配置上传文件存储目录
UPLOAD_FOLDER = 'static/uploads'
# 允许上传的图片格式
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
# 单张图片最大大小限制为5MB
app.config['MAX_CONTENT_LENGTH'] = 5 * 1024 * 1024
# 确保上传目录存在
if not os.path.exists(UPLOAD_FOLDER):
os.makedirs(UPLOAD_FOLDER)
文件上传接口开发
实现接收客户端上传的图片，保存到指定目录，同时返回图片的访问路径，方便客户端后续获取。
def allowed_file(filename):
# 判断文件后缀是否在允许范围内
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@app.route('/upload', methods=['POST'])
def upload_image():
if 'file' not in request.files:
return jsonify({'code': 400, 'msg': '未检测到上传文件'})
file = request.files['file']
if file.filename == '':
return jsonify({'code': 400, 'msg': '未选择文件'})
if file and allowed_file(file.filename):
# 生成唯一文件名，避免重复
timestamp = int(time.time())
file_ext = file.filename.rsplit('.', 1)[1].lower()
new_filename = f'img_{timestamp}.{file_ext}'
file_path = os.path.join(UPLOAD_FOLDER, new_filename)
file.save(file_path)
# 返回图片可访问路径
image_url = f'/static/uploads/{new_filename}'
return jsonify({'code': 200, 'msg': '上传成功', 'data': {'url': image_url}})
return jsonify({'code': 400, 'msg': '不支持的文件格式'})
图片访问与旧文件清理
提供图片访问接口，同时实现定时清理超过7天的旧图片，避免存储空间被无效文件占用。
@app.route('/static/uploads/')
def get_uploaded_image(filename):
return send_from_directory(UPLOAD_FOLDER, filename)
def clean_old_images():
# 清理7天前的旧图片
current_time = time.time()
for filename in os.listdir(UPLOAD_FOLDER):
file_path = os.path.join(UPLOAD_FOLDER, filename)
if os.path.isfile(file_path):
# 获取文件修改时间
file_mtime = os.path.getmtime(file_path)
# 7天对应的秒数
if current_time - file_mtime > 7 * 24 * 3600:
os.remove(file_path)
print(f'已清理旧文件: {filename}')
# 可以在应用启动时执行一次清理，也可以配合定时任务框架定期执行
clean_old_images()
客户端实现
图片上传功能
使用原生JavaScript实现图片选择、上传的交互逻辑，上传成功后记录返回的图片路径。
<div class="upload-container">
<input type="file" id="imageInput" accept="image/png,image/jpg,image/jpeg,image/gif">
<button onclick="uploadImage()">上传图片</button>
<p id="uploadTip"></p>
</div>
<script>
function uploadImage() {
const input = document.getElementById('imageInput');
const file = input.files[0];
if (!file) {
document.getElementById('uploadTip').innerText = '请先选择图片';
return;
}
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => {
if (data.code === 200) {
document.getElementById('uploadTip').innerText = '上传成功，图片路径：' + data.data.url;
// 记录当前最新图片路径，用于刷新展示
localStorage.setItem('latestImageUrl', data.data.url);
} else {
document.getElementById('uploadTip').innerText = data.msg;
}
})
.catch(err => {
document.getElementById('uploadTip').innerText = '上传失败，请重试';
});
}
</script>
客户端定时刷新图片
实现定时向服务器请求最新图片路径，或者直接使用本地记录的最新路径刷新图片展示，确保客户端能看到最新的图片内容。
<div class="image-show">
<img id="showImg" src="" alt="展示图片">
</div>
<script>
// 定时刷新图片，每3秒执行一次
setInterval(() => {
const latestUrl = localStorage.getItem('latestImageUrl');
if (latestUrl) {
// 添加时间戳避免浏览器缓存旧图片
const img = document.getElementById('showImg');
img.src = latestUrl + '?t=' + new Date().getTime();
}
}, 3000);
// 页面加载时初始化图片
window.onload = function() {
const latestUrl = localStorage.getItem('latestImageUrl');
if (latestUrl) {
document.getElementById('showImg').src = latestUrl;
}
};
</script>
注意事项
- 生产环境中需要添加更严格的文件校验，避免恶意文件上传
- 文件存储目录建议做好权限控制，避免被直接访问篡改
- 定时刷新间隔可以根据实际需求调整，避免过于频繁请求增加服务器压力
- 如果上传图片量较大，可以考虑将文件存储到对象存储服务，而非本地服务器
以上方案完整实现了Flask应用中的图片动态更新与上传、客户端定时刷新和服务器端文件管理功能，可根据实际业务需求调整细节参数。