angulaire - taille du fichier change lorsque vous utilisez http $

Question

J'utilise reste de ZF2 pour mon api, et je me sers que pour télécharger des fichiers MP3. L'API crée des fichiers MP3, puis les envoie au client. Je peux seulement en déduire que le code angulaire et mon code frontal créent ce problème, car une entrée URL "pure" dans le navigateur fonctionne correctement.

Je soupçonne que c'est le code frontend créant le problème, car le fichier que le serveur crée est identique dans l'URL soit « pure » ou la demande angulaire. Quand il arrive au client cependant, un fichier de 2 Mo est de 3,6 Mo, et ne joue pas. Voici le code de la face avant correspondant du contrôleur angulaire.

$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); 
    }); 
}; 

de ce poste how to download file using AngularJS and calling MVC API?

Pour les tests, le serveur ne répond pas de façon dynamique à "lessonList". Il crée le même fichier mp3 à chaque fois, et les hachages du fichier créé confirment qu'il n'y a pas de différences.

Ce que j'ai essayé: Changer l'en-tête Content-Type null. Par là je veux dire ne pas l'inclure dans l'objet $ config $.

Je ne peux pas penser à autre chose à essayer. Cela fonctionne très bien lors de l'entrée « www.example.com/api/lessons » dans le navigateur comme GET et les méthodes GET et POST sont identiques à l'arrière, donc je pense qu'il doit être le code frontal. Les hachages sont identiques pour le fichier GET reçu "pur" et le fichier généré par backend. Ils ne sont pas identiques en utilisant cette méthode en angulaire.

EDIT: Lorsque j'utilise SoX pour lire le mp3 téléchargé, j'obtiens l'erreur suivante: "jouer WARN mp3-util: MAD lost sync" plusieurs fois. Encore une fois, cela ne se produit pas en utilisant la méthode d'URL du navigateur.

Des suggestions?

Answer 1

Vous devez définir responseType comme blob:

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

La valeur par défaut est responseType'' (= DOMString) de sorte que vous enregistrez par mégarde data comme fichier texte ordinaire.