JavaScript 如何上传 blob？

使用XMLHttpRequest 、 Fetch API 、 jQuery在 JavaScript 中上传blob （保存存储在文件中的数据的一组字节）的方法有很多。在本教程中，我们将讨论大多数浏览器支持的两种最常见的方式。

注意：要测试我们的 HTTP 请求，您可以使用最小的 express 服务器。您还可以使用任何在线测试工具，例如 webhook.site。

Fetch API： Fetch API允许 Web 浏览器通过 HTTP 请求从服务器发送和接收数据。它是一个易于使用的XMLHttpRequest版本。 fetch()方法返回一个Promise ，然后可以将其与 then() 和 catch() 链接以更好地处理错误。除 IE 外，所有现代浏览器都支持它。

句法：

fetch( url,  // API endpoint
{
    method:"",  // HTTP Method (GET, POST, PUT, DELETE)
    body: {},   // Data to be sent
}).then(response => {

    // handle the response
})
.catch(e => {

    // handle the error
});

例子：

JavaScript

    function uploadBlob() {
        const blob =
            new Blob(
                ["This is some important text"],
                { type: "text/plain" }
            );
  
        // Creating a new blob  
        // Hostname and port of the local server
        fetch('http://localhost:3000', {
  
            // HTTP request type
            method: "POST",
  
            // Sending our blob with our request
            body: blob
        })
        .then(response => alert('Blob Uploaded'))
        .catch(err => alert(err));
    }
  
    document.addEventListener('load', uploadBlob())

输出：

AJAX：它是一组 Web 应用程序，可以从服务器异步发送和检索数据，而无需重新加载当前页面。请在调用 ajax函数之前导入或加载 jQuery。

句法：

$.ajax({
    url: "",       // API Endpoint
    type: "",      // HTTP Method (GET, POST, PUT, DELETE)
    data: {},      // Data to be sent
    
    // Specifies how the form-data should be encoded
    enctype: 'multipart/form-data',
    success: function(data) {
    
    // Handle the response
}, error: function(e) {

    // Handle the error
}
});

例子：

HTML

  

    
    

  

    
        function uploadBlob() {
            const blob = new Blob(
                ["This is some important text"],
                { type: "text/plain" }
            );
  
            // Creating a new blob  
            $.ajax({
  
                // Hostname and port of the local server
                url: "http://localhost:3000/",
  
                // HTTP request type
                type: "POST",
  
                // Sending blob with our request
                data: blob,
                processData: false,
                contentType: false,
                success: function (data) {
                    alert('Blob Uploaded')
                },
                error: function (e) {
                    alert(e);
                }
            });
  
        }
        $(document).on('load', uploadBlob());
    

  

输出：