javascript - Angular 2+ HTTP POST 和 GDrive API。带名称的断点续传文件上传

Question

我正在尝试在 Angular 2 中将文件上传到 Google Drive。到目前为止，我可以上传文件，但没有 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 中使用> 上传类型。但在这里我遇到了一个又一个的问题，但就是无法正确完成。

我彻底搞砸了。以下是我使用可恢复上传类型的方法:

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 进行可恢复上传:

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

什么是内容长度:38？它是文件长度，我可以只使用 file.size？

使用 multipart 我不知道如何在请求中添加这些边界分隔符。

我看到一些问答，Angular 不支持 multipart，但那是 1-2 年前的事了。那现在呢？

我可以使用标准 Angular 功能通过可恢复上传到 GDrive 以及附加文件元数据吗？

Answer 1

所以。对 API 如何工作进行更多研究。我想出了以下可恢复文件上传的解决方案。主要想法是，第一次我必须发出请求并为我的文件“设置元数据”，并通过链接获得响应，在哪里上传文件。此链接作为名为 location 的响应 header 之一出现。

这是完整的工作代码。只需将 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()
  }

也许解决方案并不理想，到目前为止，我不在这里处理错误，也不使用可恢复功能，例如按 block 上传，只需一次上传文件。但希望如果其他坚持 GDrive 上传的人能够得到一个想法。