問題描述

我正在嘗試將文件上傳到 Angular 2 中的 Google Drive.到目前為止，我可以上傳文件，但沒有 title 并且它們是無標題"

I am trying to upload files to Google Drive in Angular 2. So far I am able to upload files, but without title and they are "Untitled"

這是執行此操作的代碼:

Here is code to do that:

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 上傳類型.但是在這里我遇到了一個又一個問題，只是無法正常解決.

I know, that in order to send metadata with file, I have to add this metadata to Request body and use at multipart or resumable upload types. But here I faced issue after issue and just can't make it properly.

我完全搞砸了.這是我使用 resumable 上傳類型的方法:

I completely messed up. Here is on of my approaches with resumable upload type:

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

這不僅僅是我的兩種方法......

that's not only two of my approaches...

根據 Drive API for resumable 上傳:

According to Drive API for resumable upload:

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?

What is Content-Length: 38? it's file length and I can just use file.size?

使用 multipart 我無法弄清楚如何在請求中添加那些邊界分隔符.

With multipart I can't figure out how to add those boundary separator in the request.

我看到了一些問答，Angular 不支持 multipart，但那是 1-2 年前的事了.現在呢?

I saw some Q and A, that multipart were not supported by Angular, but that was 1-2 year ago. What about now?

我可以使用標準 Angular 功能以某種方式使用可恢復上傳到 GDrive 以及其他文件元數據嗎?

Can I somehow use resumable upload to GDrive with additional file metadata using standard Angular features?

推薦答案

所以.關于 API 工作原理的更多研究.我想出了以下可恢復文件上傳的解決方案.主要思想，第一次我必須為我的文件發出請求并設置元數據"并通過鏈接獲得響應，上傳文件的位置.這個鏈接作為 response header 之一出現，稱為 location.

So. A bit more research on how API works. I came up with the following solution for resumable file upload. Main Idea, that first time I have to make a request and "set metadata" for my file and get response with the link, where to upload the file. And this link came as one of the response header called location.

這是完整的工作代碼.只需將 File 對象傳遞給第一個函數.

Here is fully working code. Just pass File object to the first function.

我只是很快為此制作了 2 個函數.第一個將設置元數據(只是名稱)并調用第二個函數來上傳二進制數據.

I just quickly made 2 functions for this. First one will set metadata (just name) and call second function to upload just binary data.

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

上傳數據的第二個函數:

Second function to upload data:

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

Maybe solution not ideal, so far I do not handle errors here and do not use resumable features like uploading by chunks, just upload file at once. But hopefully if someone else stuck with GDrive uploading can get an idea.

這篇關于Angular 2+ HTTP POST 和 GDrive API.帶名稱的可恢復文件上傳的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！