跟蹤通過js將文件上傳到Google雲存儲的進度？

Question

我想知道使用JavaScript客戶端時是否可以跟蹤文件上傳到Google雲存儲的進度？ 我有一個進度條，希望向用戶顯示到目前為止已上傳了多少文件。

我使用的是Google在其示例頁面上提供的文件上傳代碼。

Answer 1

我沒有使用js庫提供的gapi.client.request api，而是創建了XMLHttpRequest並為事件progress附加了事件偵聽器。 如以下所示：

      const boundary = '-------314159265358979323846';
      const delimiter = "\r\n--" + boundary + "\r\n";
      const close_delim = "\r\n--" + boundary + "--";

      var reader = new FileReader();
      reader.readAsBinaryString(fileData);
      reader.onload = function(e) {
        var contentType = fileData.type || 'application/octet-stream';
        var metadata = {
          'name': 'testing',
          'mimeType': contentType
        };

        var base64Data = btoa(reader.result);
        var multipartRequestBody =
          delimiter +
          'Content-Type: application/json\r\n\r\n' +
          JSON.stringify(metadata) +
          delimiter +
          'Content-Type: ' + contentType + '\r\n' +
          'Content-Transfer-Encoding: base64\r\n' +
          '\r\n' +
          base64Data +
          close_delim;

        gapi.client.request()
        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'https://www.googleapis.com/upload/storage/v1/b/bucket/o?uploadType=multipart&key=apiKey&alt=json', true);

        xhr.setRequestHeader('Content-Type', 'multipart/mixed; boundary="' + boundary + '"');
        xhr.setRequestHeader('authorization', 'Bearer ' + gapi.auth.getToken().access_token);

        xhr.upload.addEventListener("progress", function(e) {
          var pc = parseFloat(e.loaded / e.total * 100).toFixed(2);
        }, false);

        xhr.onreadystatechange = function(e) {
          if (xhr.readyState == 4) {
            console.log(xhr.responseText);
          }
        };

        xhr.send(multipartRequestBody);

來源：大部分代碼來自Google的js庫，唯一的增加是事件偵聽器，用於偵聽上傳進度。