Flask接收Bootstrap-Vue文件输入POST请求时无法获取文件求助

前端问题修正 #

你当前前端代码核心错误是手动设置了multipart/form-data请求头，缺少了表单解析必需的boundary参数，导致后端无法正常解析上传的文件字段。

具体修改点： #

• 移除axios配置中手动写的headers项，浏览器发送FormData时会自动生成合法的请求头
• 新增非空判断，避免空文件提交

修正后的submitFile方法： #

submitFile() {
  if (!this.file) return
  const path = 'http://localhost:5000/single-file';
  const formData = new FormData();
  formData.append('file', this.file);
  axios.post(path, formData)
    .then(res => {
      console.log('上传成功', res.data);
    })
    .catch(err => {
      console.log('上传失败', err);
    });
}

后端问题修正 #

你的后端代码存在多个基础语法/逻辑缺失，也是导致请求异常的原因：

具体修改点： #

1. 缺少Flask实例初始化代码，你直接调用了@app.route但没有定义app对象
2. 没有把上传路径配置注册到app.config中，且未提前创建上传目录，会导致文件保存失败
3. 缺少allowed_file函数定义，你代码中调用了该校验函数但未实现
4. POST逻辑中返回302重定向对ajax请求无意义，建议改为返回JSON格式的操作结果
5. 你引用的download_file视图未定义，若不需要下载功能可以直接返回成功响应

修正后的完整后端代码： #

from flask import Flask, jsonify, request
from werkzeug.utils import secure_filename
import os

# 初始化Flask实例
app = Flask(__name__)

# 配置项
DEBUG = True
# 建议使用当前目录下的images文件夹，避免根目录权限问题
UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'images')
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

# 注册配置到app
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
# 提前创建上传目录
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

# 补全文件后缀校验函数
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/single-file', methods=['POST'])
def upload_file():
    # 该接口仅处理POST请求，不需要支持GET
    if 'file' not in request.files:
        print('No file part')
        return jsonify({'code': 400, 'msg': '缺少文件字段'}), 400
    file = request.files['file']
    if file.filename == '':
        print('No selected file')
        return jsonify({'code': 400, 'msg': '未选择文件'}), 400
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return jsonify({'code': 200, 'msg': '上传成功', 'filename': filename}), 200
    return jsonify({'code': 400, 'msg': '文件格式不允许'}), 400

if __name__ == '__main__':
    app.run(debug=DEBUG)

额外注意事项 #

如果后端配置了跨域限制，需要安装flask-cors扩展开启跨域支持，否则前端请求会被浏览器拦截。

内容的提问来源于stack exchange，提问作者murcian0