如何将 Blob 对象转换为文件并将其发送到服务器

Question

I want to convert a blob mp3 audio object in javascript to a file and send to the server.

So this is my code:

function createDownloadLink(blob,encoding) {

    var url = URL.createObjectURL(blob);
    var au = document.createElement('audio');
    var li = document.createElement('li');
    var link = document.createElement('a');

    // Put in the server

    var token = $("#token").val();

    var formData = new FormData();
    

    formData.append("_token", token);
    formData.append('audio', blob);
    
    $.ajax('https://myip/audio', {
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(data);
        },
        error: function (data) {
            console.log(data);
        }
    });
}

The response is for the server is the following:

{"_token":"3Qtbk53PLvzTzDBZrYwZY9WrHC7I6jmy9G6Aj6zw","audio":{}}

When i make console.log to the blob object appear this

Blob {size: 32914, type: "audio/mpeg"}
size: 32914
type: "audio/mpeg"
__proto__: Blob
arrayBuffer: ƒ arrayBuffer()
size: (...)
slice: ƒ slice()
stream: ƒ stream()
text: ƒ text()
type: (...)
constructor: ƒ Blob()
Symbol(Symbol.toStringTag): "Blob"
get size: ƒ size()
get type: ƒ type()
__proto__: Object

Any ideas to solve this?

Answer 1

Following snippets converts a blob to file and appends it to the formdata

const blobFile = new File([blob], 'your_file_name');
formData.append("audio", blobFile);

However blob should work fine as well, as file is also a blob.