### 实现一个带有自定义图片功能的简单网页 为了创建一个能够上传和显示自定义图片的简单网页，可以使用 Python 的 Flask 框架。Flask 是一种轻量级 Web 应用程序框架，非常适合快速搭建小型项目[^3]。下面是一个完整的实现方案。 #### 安装依赖 首先需要安装 Flask 和其他可能需要用到的库： ```bash pip install flask ``` --- #### 代码实现 ##### 后端逻辑 (`app.py`) 后端负责接收前端传来的文件，并保存到服务器上的指定目录中，然后再返回路径以便展示。 ```python from flask import Flask, render_template, request, redirect, url_for import os # 初始化Flask应用 app = Flask(__name__) # 设置允许上传的文件类型 ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'} def allowed_file(filename): """判断文件名是否合法""" return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS @app.route('/') def index(): """主页渲染模板""" return render_template('upload.html') @app.route('/upload', methods=['POST']) def upload_image(): """处理图片上传请求""" if 'file' not in request.files: return "No file part" file = request.files['file'] if file.filename == '': return "No selected file" if file and allowed_file(file.filename): # 构建安全的文件名并保存 filepath = os.path.join(app.root_path, 'static/images', file.filename) file.save(filepath) # 返回成功页面并携带新图地址参数 return render_template('success.html', image_url=url_for('static', filename=f'images/{file.filename}')) if __name__ == '__main__': app.run(debug=True) ``` --- ##### 前端 HTML 页面 (`templates/upload.html`) 提供表单让用户选择本地图片进行提交。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Upload Image</title> </head> <body> <h2>Choose an image to upload:</h2> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"><br><br> <button type="submit">Submit</button> </form> </body> </html> ``` --- ##### 成功页模板 (`templates/success.html`) 当图片被成功上传后会跳转至此界面查看效果。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Success Page</title> </head> <body> <h2>Your uploaded image is shown below:</h2> <img src="{{ image_url }}" alt="Uploaded Picture" width="400px"/> </body> </html> ``` --- #### 文件夹结构说明 确保项目的目录如下所示，这样静态资源才能正常加载： ``` project/ │ ├── app.py # 主脚本 ├── templates/ # 存放HTML模版 │ ├── upload.html # 图片上传页面 │ └── success.html # 展示已上传图片的结果页 └── static/ # 静态资源存放位置 └── images/ # 用户上传后的图片将存于此处 ``` --- ### 注意事项 1. **安全性考虑** 虽然这里只限定了几种常见图片格式作为可接受的内容，但在生产环境中还需要进一步加强验证机制防止恶意攻击[^3]。 2. **跨平台兼容性测试** 不同操作系统间可能存在细微差别，建议充分测试以确认无误运行。 3. **性能优化** 对于大流量访问情况下的效率提升措施比如CDN分发等也应在规划范围内。 ---