如何将XMLHttpRequest响应的一部分存储为变量?

时间:2017-08-15 18:54:30

标签: javascript google-drive-api xmlhttprequest

我使用修改后的this tutorial版本使用表单将文件上传到Google云端硬盘。

以下是相关代码:

$("#fUpload").on("change", function () {
        var uploadObj = $("[id$=fUpload]");
        var file = uploadObj.prop("files")[0];
        var metadata = {
            'title': file.name,
            'description': " ",
            'mimeType': file.type || 'application/octet-stream',
            "parents": [{
                "kind": "drive#file",
                "id": "0B5zM5ktmwJ2fN0c3RWYxWC1rUzQ"
            }]
        };
        var arrayBufferView = new Uint8Array(file);
        var uploadData = new Blob(arrayBufferView, {type: file.type || 'application/octet-stream'});
        try{
            var uploader =new MediaUploader({
                file: file,
                token: gapi.auth.getToken().access_token,
                metadata: metadata,
                params: {
                    convert:false,
                    ocr: false
                }
            });
            uploader.upload();
        }catch(exc){
            showErrorMessage("Error: " + exc);
            $("#fUpload").val(" ");
        }
    });

var MediaUploader = function (options) {
    var noop = function () { };
    this.file = options.file;
    this.contentType = options.contentType || this.file.type || 'application/octet-stream';
    this.metadata = options.metadata || {
        'title': this.file.name,
        'mimeType': this.contentType
    };
    this.token = options.token;
    this.onComplete = options.onComplete || noop;
    this.onProgress = options.onProgress || noop;
    this.onError = options.onError || noop;
    this.offset = options.offset || 0;
    this.chunkSize = options.chunkSize || 0;
    this.retryHandler = new RetryHandler();

    this.url = options.url;
    if (!this.url) {
        var params = options.params || {};
        params.uploadType = 'resumable';
        this.url = this.buildUrl_(options.fileId, params, options.baseUrl);
    }
    this.httpMethod = options.fileId ? 'PUT' : 'POST';
};

/**
* Initiate the upload.
*/
MediaUploader.prototype.upload = function () {
    var self = this;
    var xhr = new XMLHttpRequest();

    xhr.open(this.httpMethod, this.url, true);
    xhr.setRequestHeader('Authorization', 'Bearer ' + this.token);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('X-Upload-Content-Length', this.file.size);
    xhr.setRequestHeader('X-Upload-Content-Type', this.contentType);

    xhr.onload = function (e) {
        if (e.target.status < 400) {
            var location = e.target.getResponseHeader('Location');
            this.url = location;
            this.sendFile_();
        } else {
            this.onUploadError_(e);
        }
    } .bind(this);
    xhr.onerror = this.onUploadError_.bind(this);
    xhr.send(JSON.stringify(this.metadata));
};

/**
* Send the actual file content.
*
* @private
*/
MediaUploader.prototype.sendFile_ = function () {
    var content = this.file;
    var end = this.file.size;

    if (this.offset || this.chunkSize) {
        // Only bother to slice the file if we're either resuming or uploading in chunks
        if (this.chunkSize) {
            end = Math.min(this.offset + this.chunkSize, this.file.size);
        }
        content = content.slice(this.offset, end);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('PUT', this.url, true);
    xhr.setRequestHeader('Content-Type', this.contentType);
    xhr.setRequestHeader('Content-Range', "bytes " + this.offset + "-" + (end - 1) + "/" + this.file.size);
    xhr.setRequestHeader('X-Upload-Content-Type', this.file.type);
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', this.onProgress);
    }
    xhr.onload = function(event){
    var xhr = event.target;

    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("target").innerHTML = xhr.responseText
    }


    xhr.onerror = this.onContentUploadError_.bind(this);
    xhr.send(content);
};

我需要将响应中指定的ID存储为变量。响应机构looks like this。问题是我无法弄清楚如何实现它。我认为成功的处理程序应该照顾这个,但它不是:

/**
* Handle successful responses for uploads. Depending on the context,
* may continue with uploading the next chunk of the file or, if complete,
* invokes the caller's callback.
*
* @private
* @param {object} e XHR event
*/
MediaUploader.prototype.onContentUploadSuccess_ = function (e) {
    if (e.target.status == 200 || e.target.status == 201) {
        this.onComplete(e.target.response);

    } else if (e.target.status == 308) {
        this.extractRange_(e.target);
        this.retryHandler.reset();
        this.sendFile_();
    }
};

我已尝试console.log(e.target.response)console.log(e.target.responseText)

var response = e.target.response;
console.log(response);

似乎没有任何效果。我甚至无法让控制台输出一个字符串。

对不起,如果它有点蠢,我还是很吵。

1 个答案:

答案 0 :(得分:1)

从您的问题的评论中,看起来您有自己想要的回复。只需在范围之外声明一个变量,并为其分配响应的ID属性。

T::operator T*()