Angular 2+ HTTP POST 和 GDrive API。带名称的可恢复文件上传

Question

我正在尝试在 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 正文并使用 multipart 或 resumable 上传类型。但是在这里我遇到了一个又一个问题，只是无法正常解决。

我完全搞砸了。这是我使用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));
}

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

根据 Drive API for resumable 上传：

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 以及其他文件元数据吗？

Answer 1

所以。关于 API 工作原理的更多研究。我想出了以下可恢复文件上传的解决方案。主要思想，第一次我必须为我的文件发出请求并“设置元数据”并通过链接获得响应，上传文件的位置。这个链接是response header 之一，称为location。

这是完整的工作代码。只需将File 对象传递给第一个函数。

我只是很快为此制作了 2 个函数。第一个将设置元数据（只是名称）并调用第二个函数来上传二进制数据。

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()
  }

也许解决方案不理想，目前我这里没有处理错误，也没有使用resumable分块上传等功能，只需一次上传文件。但希望如果其他人坚持 GDrive 上传可以得到一个想法。