flask怎么上传图片并在前端显示

Flask是一个轻量级的Web应用框架，可以方便地处理文件上传包括图片上传。要在Flask中上传图片并在前端显示，你可以按照以下步骤操作：

1. **设置文件上传配置**：
首先，在你的Flask应用程序中，需要设置允许接收文件上传的配置。在`app.py`中添加相应的代码：

   from flask import Flask, request, render_template

   app = Flask(__name__)
   app.config['UPLOAD_FOLDER'] = 'uploads'
   app.config['ALLOWED_EXTENSIONS'] = {'jpg', 'jpeg', 'png'}

这里设置了上传目录和允许的文件类型。

2. **处理文件上传**：
创建一个路由来接收文件上传请求，并检查文件类型：

   def upload_image():
       if 'file' not in request.files:
           return jsonify({'error': 'No file part'}), 400
       file = request.files['file']
       if file.filename == '':
           return jsonify({'error': 'No selected file'}), 400
       if file and allowed_file(file.filename):
           filename = secure_filename(file.filename)
           file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
           # 返回处理后的图片URL
           return jsonify({'url': f'/uploads/{filename}'})

3. **验证文件类型**：

   def allowed_file(filename):
       return '.' in filename and \
              filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']

4. **在前端展示**：
使用HTML表单提交图片到服务器并显示返回的URL。这里假设你正在使用JavaScript：

   <form id="upload-form" action="{{ url_for('upload_image') }}" method="POST" enctype="multipart/form-data">
     <input type="file" name="file">
     <button type="submit">Upload</button>
   </form>

   <!-- 显示图片 -->
   <img id="display-image" src="" alt="Image Preview">
   <script>
     document.getElementById("upload-form").addEventListener("submit", function(e) {
       e.preventDefault();
       const formData = new FormData(this);
       fetch('/upload_image', {
         method: 'POST',
         body: formData,
       })
         .then(response => response.json())
         .then(data => {
           document.getElementById("display-image").src = data.url;
         });
     });
   </script>

5. **渲染模板**：
确保前端页面能够接收到图片URL并在适当的地方显示它。