AngularJS - 如何通过$ http发送音频文件？

Question

所以我一直在尝试使用FormData通过$ http服务发送音频文件，到目前为止我尝试发送文件还没有工作。

这就是服务的样子：

songs_services.add_new_song = function(new_song_name, new_song_artist, song) {
    var fd = new FormData();

    fd.append("new_song_name", new_song_name);
    fd.append("new_song_artist", new_song_artist);
    fd.append("song", song);

    console.log(fd.get("new_song_name"));
    console.log(fd.get("new_song_artist"));
    console.log(fd.get("song"));

    return $http.post(BACKEND_PREFIX + "add_new_song", fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).then(function() {

    }, function() {

    });
};

我想确保信息实际上已附加到我的FormData中，这就是我在控制台中获得的信息：

所以现在我知道FormData实际上有我需要的信息。

我也尝试将Content-Type更改为multipart / form-data，但也没有成功。

我也使用CakePHP 2作为我的后端，所以这就是我试图获取信息的方式：

public function add_new_song() {
    $this->autoRender = false;

    $data = json_decode(file_get_contents("php://input"));

    print_r($data);
    print_r($_POST);
    print_r($_FILES);

    $new_song_name = $_POST["new_song_name"];
    $new_song_artist = $_POST["new_song_artist"];
    $song = $_FILES;

    echo $new_song_name;
    echo "<br />";
    echo $new_song_artist;
    echo "<br />";
    print_r($song);

    die();
}

但回显变量只显示空数组，并且在尝试从$ _POST访问变量时，我也得到一个未定义的索引错误。

我应该通过$ http发送音频文件吗？我真的觉得我错过了一些细节。

Answer 1

最后，我决定尝试使用$ .ajax而不是使用angularjs $ http.post，看看发生了什么，它确实有效！

以下是我使用的内容：

$.ajax({
    type : "post",
    url : "uploads/songs",
    data : fd,
    cache : false,
    contentType : false,
    processData : false,
    success: function() {
        console.log("Hey");
    }
});

Answer 2

在Angular 6中，您可以执行以下操作以将音频作为FormData发送。

注入HttpClient：

constructor(private http:HttpClient){}

使用POST方法发送音频：

let url = 'http://destinationurl.com/endpoint';
let formData = new FormData();
formData.append('myAudioFile',audioFile);
this.http.post(url,formData).subscribe(response => {
    //handle response
}, err => {
    //handle error
});

post方法将自动将内容类型更改为多部分内容，因此您无需手动设置任何内容。