AngularJS实现视频自动下载遇createObjectURL报错求助

这个问题我之前碰到过，核心原因是AngularJS的$http请求默认没有把后端返回的文件流处理成Blob对象，导致saveAs无法正确调用createObjectURL。咱们一步步来解决：

1. 修正AngularJS的请求配置 #

$http默认会把响应解析为JSON格式，但我们需要的是二进制的Blob数据流。所以必须在请求配置中添加responseType: 'blob'，同时saveAs的参数要使用response.data（而不是整个response对象）：

$scope.download = function(){
        var fd = new FormData();
        angular.forEach($scope.files, function(video){
            fd.append('video', video);
        });

        var request = $http({
            method : 'POST',
            url: xxxx + 'video/upload?start=' + $scope.start + '&end=' + $scope.end,
            data : fd,
            transformRequest:angular.identity,
            headers:{'Content-Type':undefined},
            responseType: 'blob' // 新增：告诉AngularJS以Blob形式接收响应
        });
        request.then(function(response){
            saveAs(response.data , 'video.mp4'); // 这里传入response.data而非整个response
            $scope.isProcessing = false;
        }, function(error){
            $scope.isProcessing = false;
        });
    }

2. 优化Flask后端的文件返回逻辑 #

虽然你的后端代码能返回文件，但可以做两点优化来避免潜在问题：

• 使用os.path.join拼接路径，避免不同系统下的路径分隔符问题
• 明确指定视频的MIME类型，帮助前端正确识别文件

import os
from flask import send_file

# ... 其他代码 ...

file_path = os.path.join(app.root_path, app.config['UPLOAD_FOLDER'], 'uploadV', 'dd.mp4')
return send_file(
    file_path,
    as_attachment=True,
    mimetype='video/mp4'  # 明确指定视频MIME类型
)

3. 额外排查点 #

如果修改后还是有问题，可以检查这些地方：

• 确认后端的dd.mp4文件确实存在，打印file_path验证路径是否正确
• 如果前后端跨域部署，确保Flask的CORS配置允许返回Blob类型的响应（可以使用flask-cors扩展，确保配置了正确的allow_headers和expose_headers）
• 检查前端的FileSaver.js是否正确引入，版本是否兼容当前浏览器

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