Flask端点接收上传文件处理后返回文件无法触发客户端下载怎么办

使用XMLHttpRequest发送异步上传请求时，后端返回的文件流会被XHR对象接收并缓存在浏览器JS内存中，不会触发浏览器默认的附件下载逻辑，这是异步请求的固有特性，和后端文件生成、send_file接口逻辑是否正常无关。

根据你的业务需求二选一即可：

方案1：原生表单提交（实现最简单，无兼容问题） #

不需要写复杂的响应处理逻辑，直接通过动态创建的原生表单提交文件，浏览器会自动识别附件响应并触发下载，后端代码不需要做任何修改：

function uploadFile(file) {
    // 创建临时表单
    const tempForm = document.createElement('form');
    tempForm.method = 'POST';
    tempForm.action = '/upload';
    tempForm.enctype = 'multipart/form-data';
    tempForm.style.display = 'none';

    // 挂载文件选择器
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.name = 'file';
    // 把传入的file对象绑定到input上
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    fileInput.files = dataTransfer.files;
    tempForm.appendChild(fileInput);

    // 插入页面提交后移除临时节点
    document.body.appendChild(tempForm);
    tempForm.submit();
    document.body.removeChild(tempForm);
}

方案2：保留XHR异步请求，手动处理流触发下载 #

如果你需要保留异步请求的能力（比如添加上传进度监听、自定义错误提示），可以在XHR拿到二进制响应后，手动生成临时链接触发下载：

function uploadFile(file) {
    const form = new FormData();
    form.append('file', file);
    const request = new XMLHttpRequest();
    request.open('POST', '/upload');
    // 关键配置：指定响应类型为二进制Blob，避免文件乱码
    request.responseType = 'blob';

    request.onload = function() {
        if (request.status !== 200) {
            alert('文件分析失败，请重试');
            return;
        }
        // 从响应头解析下载文件名，没有的话用默认值
        const disposition = request.getResponseHeader('Content-Disposition');
        let fileName = '分析结果.csv';
        if (disposition) {
            const matchRes = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
            if (matchRes?.[1]) fileName = matchRes[1].replaceAll(/['"]/g, '');
        }
        // 生成临时访问链接
        const blob = new Blob([request.response], { type: 'text/csv' });
        const tempUrl = window.URL.createObjectURL(blob);
        // 创建a标签模拟点击触发下载
        const downloadTag = document.createElement('a');
        downloadTag.href = tempUrl;
        downloadTag.download = fileName;
        document.body.appendChild(downloadTag);
        downloadTag.click();
        // 清理临时节点和内存占用
        document.body.removeChild(downloadTag);
        window.URL.revokeObjectURL(tempUrl);
    };
    request.send(form);
}

可以在send_file时显式指定下载文件名和MIME类型，避免前端取不到正确的文件名：

@app.route("/upload", methods=["POST"])
def endpoint_function():
    file = flask.request.files["file"]
    analysis_function(pd.read_csv(file)) # 输出csv到filepath路径
    return flask.send_file(
        filepath,
        as_attachment=True,
        # Flask 2.0以下版本请把参数名改为 attachment_filename
        download_name="数据分析结果.csv",
        mimetype="text/csv"
    )

注意：如果服务端存储的分析报告是临时文件，下载完成后记得加逻辑删除服务器本地的临时文件，避免磁盘空间被占满。

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