使用flask 前后端分离 上传文件

可以通过以下步骤来实现使用 Flask 进行前后端分离上传文件：

1. 在前端页面中添加一个文件上传的表单，例如：

<form method="post" enctype="multipart/form-data" id="upload-form">
  <input type="file" name="file" id="file-input">
  <button type="submit">上传</button>
</form>

2. 在前端页面中编写 JavaScript 代码，使用 Fetch API 或 Axios 发送文件上传请求，例如：

const form = document.querySelector('#upload-form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const input = document.querySelector('#file-input');
  const file = input.files[0];
  const url = '/upload'; // 上传文件的后端 API URL
  const formData = new FormData();
  formData.append('file', file);
  fetch(url, {
    method: 'POST',
    body: formData,
  }).then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
});

3. 在 Flask 后端应用中定义一个接收文件上传请求的路由，例如：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload_file():
    file = request.files['file']
    # 对文件进行处理，例如保存到本地磁盘或者处理文件内容
    return jsonify({'status': 'ok'})

在这个路由函数中，可以通过 `request.files` 获取上传的文件对象，然后对文件进行处理。最后返回一个 JSON 格式的响应，告诉前端文件上传成功或者失败。

需要注意的是，在使用 Flask 进行文件上传时，需要设置表单的 `enctype` 属性为 `multipart/form-data`，这样才能上传二进制文件数据。