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

Question

So I've been trying to send an audio file through an $http service using FormData, and so far what I have tried to send the file hasn't worked yet.

This is how the service looks like:

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() {

    });
};

I wanted to make sure that the information was actually been appended to my FormData and this is what i get in the console:

So now I know that the FormData has actually the information that I need.

I have also tried changing the Content-Type to multipart/form-data with no success also.

I'm also using CakePHP 2 as my backend, so this is how I'm trying to get the information:

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

But echoing the variables only shows empty arrays and I also get an undefined index error when trying to access the variables from $_POST.

Is there any special way I should be sending the audio file through $http? I really feel like I'm missing a little detail.

Answer 1

At last, instead of using angularjs $http.post I decided to try with $.ajax and see what happened, and it actually worked!

Here's what I used:

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

Answer 2

And in Angular 6, you can do the following to send audio as FormData.

Inject the HttpClient:

constructor(private http:HttpClient){}

Use the POST method to send audio:

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

the post method will automatically change the content type to multipart, so you need not set anything manually.