![](/img/trans.png)
[英]Upload a pdf file to Google Cloud Storage with Node.js
[英]Track progress of file upload to google cloud storage via js?
我想知道使用JavaScript客户端时是否可以跟踪文件上传到Google云存储的进度? 我有一个进度条,希望向用户显示到目前为止已上传了多少文件。
我使用的是Google在其示例页面上提供的文件上传代码。
我没有使用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库,唯一的增加是事件侦听器,用于侦听上传进度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.