[英]Track progress of file upload to google cloud storage via js?
I'm wondering if it is possible to track the progress of a file upload to google cloud storage when using the javascript client? 我想知道使用JavaScript客户端时是否可以跟踪文件上传到Google云存储的进度? As I have a progress bar that I would like to show to the user on how much of the file has been uploaded so far.
我有一个进度条,希望向用户显示到目前为止已上传了多少文件。
I'm using the same upload code that google gives on their example page for file upload. 我使用的是Google在其示例页面上提供的文件上传代码。
Instead of using the gapi.client.request
api provided by the js library I instead created an XMLHttpRequest
and appended a event listener for the event progress
. 我没有使用js库提供的
gapi.client.request
api,而是创建了XMLHttpRequest
并为事件progress
附加了事件侦听器。 As seen by the following: 如以下所示:
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);
Attribution: Majority of code was taken from Google's js library with the only addition being the event listener for listening to the progress of the upload. 来源:大部分代码来自Google的js库,唯一的增加是事件侦听器,用于侦听上传进度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.