Angular与Flask文件上传异常求助：Bad Request且文件为undefined

1. 修复FileManagerService的文件传递错误 #

你的FileManagerService中错误地使用了file.data，File对象没有data属性，直接传入File实例即可：

export class FileManagerService
{
    file: File = null;

    baseUrl: string = 'http://127.0.0.1:5000/';
    public addFile(file: File) {
            const formParams = new FormData();
            // 直接传入file，而非file.data
            formParams.append('file', file);
            return this._httpClient.post(this.baseUrl + 'upload', formParams);
    }
}

2. 修正HTML中的DOM事件与元素错误 #

你的HTML存在两个关键问题：

• 按钮设置了type="file"，这是错误的，按钮应使用type="button"，并通过点击触发文件输入框
• 重复的id="formFile"会导致DOM选择冲突，且按钮上的(change)事件无效（按钮不会触发change事件）

修改后的HTML：

<div class="mt-4 sm:mt-0">
    <!-- 用按钮触发文件选择框 -->
    <button (click)="fileInput.click()"
            mat-flat-button
            [color]="'primary'">
        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
        <span class="ml-2 mr-1">Upload file</span>
    </button>
    <!-- 隐藏原生文件输入框，绑定change事件 -->
    <input #fileInput (change)="onFilechange($event)" class="form-control d-none" type="file" id="formFile">
</div>

（注：d-none是Bootstrap类，用于隐藏输入框，也可以用自定义CSS实现隐藏）

3. 组件代码的空值判断优化 #

在onFilechange中增加空值判断，避免潜在错误：

onFilechange(event: any) {
    const files = event.target.files;
    if (files && files.length > 0) {
        console.log(files[0]);
        this.file = files[0];
    }
}

4. Flask后端接收验证 #

确保Flask后端正确接收文件，示例代码：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 开启跨域支持

@app.route('/upload', methods=['POST'])
def upload_file():
    # 获取前端传递的file参数
    uploaded_file = request.files.get('file')
    if uploaded_file:
        # 处理文件，比如保存到本地
        uploaded_file.save(f"./{uploaded_file.filename}")
        return {"status": "success"}
    return {"status": "error", "message": "No file uploaded"}, 400

额外检查项 #

• 确认浏览器控制台Network标签中，请求的FormData已正确携带文件
• 确保Flask服务正常运行在http://127.0.0.1:5000端口

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