使用 gapi 将文件上传到 Google 驱动器

Question

我已关注 this article as well as 将文件上传到 Google 驱动器，其中包含元数据，导致以下代码：

readonly BOUNDARY = '--4561564891651634213217'; //Randomly mashed in numbers

uploadToDrive(file: File /*<input type="file">.files[0]*/, fileName: string) {
    this.readFile(file)
        .then(base64File => {
          gapi.client.request({
            path: 'upload/drive/v3/files', method: 'POST', params: {
              uploadType: 'multipart'
            }, headers: {
              'Content-type': `multipart/related; boundary=${this.BOUNDARY}`,
              'Content-length': file.size
            }, body: this.formatMultipartBody(file, fileName, base64File)
          })
              .then(response => console.log('Upload success! ', response), error => console.error('Upload error! ', error));
        });
  }

private readFile(file: File): Promise<string> {
    const fileReader: FileReader = new FileReader();
    return new Promise(resolve => {
      fileReader.readAsBinaryString(file);
      fileReader.onload = (event: any) => resolve(btoa(fileReader.result));
    });
  }

private formatMultipartBody(file: File, fileName: string, base64File: string) {
    const delimiter = `\r\n--${this.BOUNDARY}\r\n`;
    const closeDelimiter = `\r\n--${this.BOUNDARY}--`;
    const metadata = {
      name: fileName, mimeType: file.type || 'application/octet-stream'
    };
    const body = `
    ${delimiter}
    Content-Type: application/json; charset=UTF-8\r\n\r\n
    Content-Transfer-Encoding: base64
    ${JSON.stringify(metadata)}
    ${delimiter}
    Content-Type: ${file.type || 'application/octet-stream'}\r\n
    ${base64File}
    ${closeDelimiter}
    `;
    return body;
  }

无论我上传哪种类型的文件，我都会收到以下错误：

{
 "error": {
  "errors": [
   {
    "domain": "global",
    "reason": "badContent",
    "message": "Unsupported content with type: application/octet-stream"
   }
  ],
  "code": 400,
  "message": "Unsupported content with type: application/octet-stream"
 }
}

即使文件有扩展名（例如 hello.txt 文件包含文本 "Hello, world!"）并且请求中没有任何地方提到 "application/octet-stream".[=14，也会出现此错误=]

Answer 1

看来 Google Drive API 对格式化请求正文非常挑剔，这个 formatMultiPartBody 方法最终对我有用：

private formatMultipartBody(file: File, fileName: string, base64Data: string): string {
    const delimiter = `--${this.BOUNDARY}`;
    const closeDelimiter = `--${this.BOUNDARY}--`;
    const metadata = {
      name: fileName, mimeType: file.type || 'application/octet-stream'
    };
    const body = `
    \n${delimiter}\
    \nContent-Type: application/json; charset=UTF-8\
    \n\n${JSON.stringify(metadata)}\
    \n${delimiter}\
    \nContent-Type: ${file.type || 'application/octet-stream'}\
    \nContent-Transfer-Encoding: base64\      
    \n\n${base64Data}\
    \n${closeDelimiter}`;
    return body;
  }

使用 gapi 将文件上传到 Google 驱动器

Uploading a file to Google Drive using gapi

javascript

multipart

google-drive-api

typescript

google-api-js-client