Angular 2+ HTTP POST和GDrive API。与名字

Question

我试图在角2到目前为止我能上传文件文件上传到谷歌驱动器，但没有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)); 
} 

，不仅是我的两个方法......

根据驱动器API为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？

With 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上传可以得到一个想法。