Angular 2+ HTTP POST和GDrive API。名为

时间:2017-06-01 10:47:16

标签: javascript angular typescript google-drive-api

我正在尝试将文件上传到Angular 2中的Google云端硬盘。到目前为止,我可以上传文件,但没有title并且它们是“无标题”

以下是执行此操作的代码:

gDriveUploader(file): Promise<any> {
let authToken = tokenHere;
const url = `https://www.googleapis.com/upload/drive/v2/files/`
    let formData:FormData = new FormData();
    formData.append('title', file, file.name);
    let headers = new Headers({
      'Authorization': 'Bearer ' + authToken
    });
    headers.append('Accept', file.type);
    let options = new RequestOptions ({ 
      headers: headers,
    });

    console.log('OPTIONS: ', options)

    return this.http.post(`${url}`, formData, options)
        .toPromise()
           .then(response => response.json())
           .catch(e=>console.log(e));
}

我知道,为了使用文件发送元数据,我必须将此元数据添加到Request正文,并使用multipartresumable上传类型。但在这里,我遇到了一个又一个问题,并且无法正常进行。

我完全搞砸了。以下是resumable上传类型的方法:

gDriveUploader(file): Promise<any> {
let authToken = token;
const url = `https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable`
    console.log('FILE TO UPLOAD: ', file)
    let formData:FormData = new FormData();
    formData.append('name', file, file.name);
    let headers = new Headers({
      'Authorization': 'Bearer ' + authToken,
      'Content-Type': 'application/json; charset=UTF-8', //if remove "Bad Content" Error
      //'Content-Length': file.size, not sure if this one right?
    });
    let options = new RequestOptions ({ 
      headers: headers,
    });

    return this.http.post(`${url}`, formData, options)
        .toPromise()
           .then(response => response.json())
           .catch(e=>console.log(e));
}

这不仅仅是我的两种方法......

根据resumable上传的云端硬盘API:

POST https://www.googleapis.com/drive/v3/files?uploadType=resumable 

HTTP/1.1
Authorization: Bearer [YOUR_AUTH_TOKEN]
Content-Length: 38
Content-Type: application/json; charset=UTF-8
X-Upload-Content-Type: image/jpeg
X-Upload-Content-Length: 2000000

什么是Content-Length: 38?这是文件长度,我可以使用file.size

使用multipart我无法弄清楚如何在请求中添加这些边界分隔符。

我看到了一些Q和A,multipart没有得到Angular的支持,但那是1 - 2年前。那现在呢?

我可以使用标准的Angular功能以某种方式使用可恢复的上传到GDrive以及其他文件元数据吗?

1 个答案:

答案 0 :(得分:0)

因此。关于API如何工作的更多研究。我提出了以下可恢复文件上传的解决方案。主要想法,我第一次提出请求并设置元数据&#34;对于我的文件,并获得链接的响应,上传文件的位置。此链接是名为response header的{​​{1}}之一。

这是完全有效的代码。只需将location对象传递给第一个函数。

我很快为此做了两个功能。第一个将设置元数据(只是名称)并调用第二个函数来上传二进制数据。

File

上传数据的第二个功能:

gDriveUploader(file): Promise<any> {
  let authToken = token
  const url = `https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable`
      let headers = new Headers({
        'Authorization': 'Bearer ' + authToken,
        'Content-Type': 'application/json; charset=UTF-8',
      });
      let options = new RequestOptions ({ 
        headers: headers,
      });
      return this.http.post(`${url}`, {name: file.fullName}, options) //just set the name
          .toPromise()
            .then(response => this.gDriveUploadFile(file, response.headers.get('location'))) //call second function to upload `file` to proper URI from response
            .then(response => {
                let id = response.json().id //parse id of uploaded file
                let resp = {fileName: file.fullName, fileType: file.fileType, fileSize: file.size, fileId: id} //create an object with file file properties, if you need that
                return resp // return object back to function that called this service
            })
            .catch(e=>console.log(e));
  }

也许解决方案不理想,到目前为止我不处理错误,也不使用gDriveUploadFile(file, url): Promise<any> { //file and url we got from first func let authToken = token let headers = new Headers({ 'Authorization': 'Bearer ' + authToken, 'Content-Type': 'application/json; charset=UTF-8', 'X-Upload-Content-Type': file.type }); let options = new RequestOptions ({ headers: headers, }); return this.http.post(`${url}`, file, options) //call proper resumable upload endpoint and pass just file as body .toPromise() } 功能,例如按块上传,只需立即上传文件。但希望如果其他人坚持使用GDrive上传可以得到一个想法。