Angular至Flask文件上传功能实现问题求助

我来帮你梳理几个最可能的原因和解决办法，按顺序排查试试：

1. 跨域请求被浏览器阻止（最常见） #

Angular默认跑在http://localhost:4200，而你的Flask服务在http://localhost:5000，属于不同端口，浏览器会触发同源策略阻止跨域请求。你需要给Flask配置CORS：

首先安装Flask-CORS扩展：

pip install flask-cors

然后修改Flask代码，添加CORS支持：

from flask import Flask, request
from werkzeug import secure_filename
import os
from flask_cors import CORS  # 新增导入

UPLOAD_FOLDER = '/home/openstack/Documents/Confmrg/bcknd/uploads'
app = Flask(__name__)
CORS(app)  # 允许所有跨域请求（生产环境建议指定具体允许的源）
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# ... 其余代码不变

2. Angular拦截了原生表单的提交行为 #

Angular框架会自动拦截原生表单的提交，如果你想继续用原生表单，可以给表单加上ngNoForm属性，告诉Angular不要处理这个表单：

<form action="http://localhost:5000/uploader" method="POST" enctype="multipart/form-data" ngNoForm>
    <input type="file" name="file" />
    <input type="submit" />
</form>

更推荐的做法是用Angular的HttpClient手动处理文件上传，这样能更好地控制上传流程和处理响应：

组件HTML： #

<input type="file" (change)="onFileSelected($event)" />
<button (click)="uploadFile()">上传文件</button>

组件TypeScript： #

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
    }
  }

  uploadFile(): void {
    if (!this.selectedFile) return;

    const formData = new FormData();
    formData.append('file', this.selectedFile);

    this.http.post('http://localhost:5000/uploader', formData)
      .subscribe({
        next: (response) => {
          console.log('文件上传成功！', response);
          alert('文件上传完成');
        },
        error: (err) => {
          console.error('上传失败', err);
          alert('上传出错，请检查控制台');
        }
      });
  }
}

3. 检查Flask上传目录的权限和存在性 #

确保你设置的UPLOAD_FOLDER路径存在，并且Flask进程有写入权限。可以在Flask代码里添加目录创建逻辑：

UPLOAD_FOLDER = '/home/openstack/Documents/Confmrg/bcknd/uploads'
if not os.path.exists(UPLOAD_FOLDER):
    os.makedirs(UPLOAD_FOLDER)  # 如果目录不存在就创建

4. 用浏览器开发者工具调试请求 #

按下F12打开开发者工具，切换到「Network」标签，点击提交按钮后，观察是否有请求发送到http://localhost:5000/uploader：

• 如果没有请求：说明前端的提交行为被拦截了，回到第2点排查；
• 如果有请求但状态码异常（比如403、500）：查看响应详情，根据错误信息调整Flask配置或代码。

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