Question

我使用zf2 rest for my api，我用它来下载mp3。 api实际上创建了mp3，然后将它们发送到客户端。我只能推断出角度和我的前端代码正在创造这个问题，因为＆＃34;纯粹＆＃34;进入浏览器的URL工作正常。

我怀疑它是创建问题的前端代码，因为服务器创建的文件在＆＃34; pure＆＃34;中都是相同的。 URL或角度请求。然而，当它到达客户端时，2MB文件是3.6MB，并且没有播放。这是角度控制器的相关前端代码。

$scope.createMp3 = function(list){
    console.log(list);
    var lessonList =list;
    $http({
        method:'POST',
        url:'/api/lessons',
        data:{cards:lessonList},
        headers : {
           'Content-type' : 'audio/mpeg',
              },
    }).success(function(data, status, headers, config){
        // console.log(data);
        var file = new Blob([ data ]);
        //trick to download store a file having its URL
        var fileURL = URL.createObjectURL(file);
        var a         = document.createElement('a');
        a.text = "Download Lesson"
        a.href        = fileURL; 
        a.target      = '_blank';
        a.download    = 'yourfilename.mp3';
        document.body.appendChild(a);
        a.click();
    }).error(function( e){
        console.log('error', e);
    });
};

来自这篇文章how to download file using AngularJS and calling MVC API?

为了进行测试，服务器不会动态响应＆＃34; lessonList＆＃34;。它每次创建相同的mp3，并且创建的文件的哈希确认没有差异。

我尝试过的事情：将Content-type标头更改为null。我的意思是不将它包含在$ http配置对象中。

我无法想到其他任何事情。这可以在输入＆＃34; www.example.com/api/lessons"作为GET进入浏览器，后端的GET和POST方法相同，所以我认为它必须是前端代码。对于＆＃34;纯＆＃34;的哈希是相同的。 GET收到文件和后端生成的文件。它们在角度上使用此方法并不相同。

编辑：当使用SoX播放下载的mp3时，我收到以下错误：＆＃34;播放WARN mp3-util：MAD丢失同步＆＃34;多次。同样，使用浏览器URL方法也不会发生这种情况。

有什么建议吗？

Answer 1

您应该将responseType定义为blob：

$http({
   method:'POST',
   responseType: 'blob', //<---
   url:'/api/lessons',
   data:{cards:lessonList},
   headers : {
      'Content-type' : 'audio/mpeg',
   }
}).success(function(data, status, headers, config){ ...

默认responseType为''（= DOMString），因此您无意中将data保存为纯文本文件。

角度 - 使用$ http

1 个答案: