JS中的Blob對象：實現文件上傳和下載功能

一、什麼是Blob對象

Blob對象是JavaScript中的一個二進位類型對象，用於存儲二進位數據，例如圖片、音頻、視頻等。

Blob對象是只讀的，而且不可直接被修改。它通常通過URL.createObjectURL()方法來創建一個URL，然後再用這個URL去訪問Blob對象。

下面是一個簡單的Blob對象的例子：

// 創建一個Blob對象
var myBlob = new Blob(["Hello, World!"], {type: "text/plain"});

// 創建一個URL來訪問Blob對象
var myURL = URL.createObjectURL(myBlob);

// 使用這個URL去下載文件
var a = document.createElement("a");
a.href = myURL;
a.download = "hello.txt";
a.click();

// 釋放URL
URL.revokeObjectURL(myURL);

二、如何使用Blob對象實現文件上傳功能

文件上傳需要很多複雜的操作，但是使用Blob對象可以簡化這個過程。

1. 選擇文件

首先，用戶需要選擇要上傳的文件。這可以通過一個元素來實現。

2. 創建一個FormData對象

FormData對象是一種表示表單數據的對象。可以通過append()方法將數據添加到FormData對象中。

下面是一個創建FormData對象的例子：

// 創建一個FormData對象
var formData = new FormData();

// 添加一個文件
var fileInput = document.querySelector('input[type="file"]');
formData.append('myFile', fileInput.files[0]);

3. 發送請求

最後，將FormData對象發送到伺服器。這可以通過XMLHttpRequest對象來實現。

// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();

// 上傳進度條
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    var percent = (event.loaded / event.total) * 100;
    console.log(percent + '% uploaded');
  }
};

// 發送POST請求
xhr.open('POST', '/upload');
xhr.send(formData);

三、如何使用Blob對象實現文件下載功能

文件下載可以通過創建一個Blob對象，並將其作為URL使用來實現。

1. 創建Blob對象

首先，將文件的二進位數據存儲為Blob對象。

下面是一個創建Blob對象的例子：

// 獲取文件的二進位數據
var fileData = "Hello, World!";

// 創建Blob對象
var myBlob = new Blob([fileData], {type: "text/plain"});

2. 創建URL

使用URL.createObjectURL()方法來創建一個URL，然後再用這個URL去訪問Blob對象。

// 創建URL來訪問Blob對象
var myURL = URL.createObjectURL(myBlob);

3. 下載文件

最後，使用這個URL去下載文件。

// 創建一個鏈接
var a = document.createElement("a");

// 設置鏈接的URL和下載文件的名稱
a.href = myURL;
a.download = "hello.txt";

// 模擬點擊鏈接進行下載
a.click();

四、小結

通過Blob對象，我們可以輕鬆地實現文件上傳和下載功能。上傳文件時，使用FormData對象可以方便地將文件數據添加到請求中。下載文件時，使用Blob對象可以在客戶端直接創建一個可下載的文件。