2017-06-01 67 views
0

我試圖在角2到目前爲止我能上傳文件文件上傳到谷歌驅動器,但沒有title,他們是「無題」Angular 2+ HTTP POST和GDrive API。與名字

這裏可恢復的文件上傳代碼做到這一點:

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

,不僅是我的兩個方法......

根據驅動器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和額外的文件元數據嗎?

回答

0

所以。對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上傳可以得到一個想法。