在Web開發中，上傳文件是相當常見而重要的任務。最近幾年間，隨著大量新型云存儲服務的出現，開發者也多了很多選擇，比如MinIO就是其中之一。本文主要介紹如何使用JavaScript上傳文件到MinIO上，并提供相關的代碼示例。
一. 前置條件
在開始本文的主要內容之前，需要先明確幾個前置條件：
1. 你需要擁有一個MinIO服務器，包括一個有效的Access Key、Secret Key以及Bucket等一系列基本設置，用于訪問存儲服務。
2. 你需要有基本的JavaScript語言知識，并且了解如何使用XMLHttpRequest對象（常簡稱為XHR）來進行Ajax操作。
二. 創建XMLHttpRequest對象
在上傳文件之前，需要創建一個XMLHttpRequest對象，并通過該對象向服務器發起HTTP請求。

javascript
var xhr = new XMLHttpRequest();

當然，在實際應用中，你可能需要為xhr對象添加一些事件和方法，如下：

javascript
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", url, true);
xhr.setRequestHeader("Authorization", "Bearer " + jwtToken);
xhr.setRequestHeader("Content-Type", file.type);
xhr.send(file);

其中，前三個參數用于設置xhr對象的監聽事件；第四個參數表示請求類型（POST方式上傳文件）；第五個參數代表請求目標地址（MinIO服務器地址）；第六、七個參數是設置HTTP請求頭信息。
三. 上傳文件
在創建好xhr對象之后，就可以通過send()方法來將文件上傳到服務器。

javascript
xhr.send(file);

在發送文件時，需要通過FormData對象將文件和其他數據一同發送到服務器：

javascript
var formData = new FormData();
formData.append("key", key);
formData.append("X-Amz-Credential", credentials);
formData.append("X-Amz-Algorithm", algorithm);
formData.append("X-Amz-Date", isoDate);
formData.append("X-Amz-Signature", signature);
formData.append("acl", acl);
formData.append("bucket", bucket);
formData.append("Content-Type", file.type);
formData.append("file", file, file.name);
xhr.send(formData);

其中，formData對象是一個表單數據實例，可以添加多個鍵值對，包括文件的相關信息和上傳參數等。
四. 上傳進度
在上傳文件時，可以利用xhr.upload.onprogress事件來獲取上傳進度信息。

javascript
xhr.upload.onprogress = function(evt) {
if (evt.lengthComputable) {
var percentageComplete = evt.loaded / evt.total;
console.log(percentageComplete);
}
};

其中，evt對象描述的是當前上傳的狀態和進度，可以通過evt.loaded和evt.total屬性來計算上傳的百分比。
五. 上傳完成狀態
在上傳完成后，可以根據xhr對象返回的狀態碼來判斷上傳完成狀態，200表示上傳成功，其余狀態碼表示失敗。

javascript
if (xhr.status === 200) {
console.log("上傳成功");
} else {
console.log("上傳失敗");
}

六. 總結
本文介紹了如何使用JavaScript上傳文件到MinIO服務器上，主要依賴于XMLHttpRequest對象的支持。由于上傳文件涉及到很多方面的知識點，因此在實際應用中需要謹慎處理請求頭信息、文件類型、FormData數據等問題，以確保上傳順利完成。