Cách tải tệp lên Google bằng cách sử dụng gapi và tải lên có thể tiếp tục lại?

Question

Tôi đang cố gắng theo dõi this hướng dẫn để tải lên lại có thể tiếp tục trên Google Drive thông qua Google Api.

Đây là mã của tôi, bạn có thể thấy nó yêu cầu 2 yêu cầu làm hướng dẫn yêu cầu, phần đầu tiên tạo siêu dữ liệu và sau đó chúng tôi sử dụng vị trí để bắt đầu tải lên tệp với phiên được tạo bởi yêu cầu đầu tiên.

 const file = new File(['Hello, world!'], 'hello world.txt', { type: 'text/plain;charset=utf-8' }); 
     const contentType = file.type || 'application/octet-stream'; 

     const reqMetadata = gapi.client.request({ 
      'path': 'upload/drive/v3/files', 
      'method': 'POST', 
      'params': { 'uploadType': 'resumable' }, 
      'headers': { 
       'X-Upload-Content-Type': file.type, 
       'X-Upload-Content-Length': file.size, 
       'Content-Type': 'application/json; charset=UTF-8' 
      }, 
      'body': { 
       'name': file.name, 
       'mimeType': contentType, 
       'Content-Type': contentType, 
       'Content-Length': file.size 
      } 
     }); 

     reqMetadata.execute((respMetadata, rawRespMetadata: any) => { 
      const locationUrl = JSON.parse(rawRespMetadata).gapiRequest.data.headers.location; 

      const reader = new FileReader(); 

      reader.onload = (e) => { 
       const reqFile = gapi.client.request({ 
        'path': locationUrl, 
        'method': 'PUT', 
        'headers': { 
         'Content-Type': file.type, 
         'Content-Length': file.size 
        }, 
        'body': reader.result 
       }); 

       reqFile.execute(respFile => { 
        console.log(respFile); 
       }); 
      }; 

      reader.readAsArrayBuffer(file); 
     }); 

Sự cố là gì?

Vâng, có vẻ như các thư viện Google Api không thích mảng File/byte như cơ thể trên gapi.client.request của họ và họ đang cắt bỏ nó đi

cách chính xác để vượt qua các tập tin là gì? Tôi đã thử cả nội dung: tệp và nội dung: reader.result nhưng cùng một kết quả

PS: gapi đã được xác thực hoàn toàn & được khởi tạo với auth2, tôi có thể tạo tệp/thư mục.

EDIT 1:

thư viện GAPI chỉ là jsoing các FileArray, do đó chức năng JSON sẽ thay đổi nó vào một đối tượng rỗng, không có cách nào để làm cho nó làm việc .. một cái gì đó phải được thiếu.

EDIT 2:

tôi đã làm cho nó làm việc mà không có sự GAPI, nó tải lên một cách chính xác các tập tin nhưng tôi có một số vấn đề với CORS

  reader.onload = (e) => {      

       const authHeader = `Bearer ${this.auth.currentUser.get().getAuthResponse().access_token}`; 
       const headers = new Headers({ 
        'Authorization': authHeader, 
        'Content-Type': file.type 
       }); 
       const options = new RequestOptions({ headers }); 
       const url = locationUrl; 

       this.http.put(url, reader.result, options).subscribe(res => { 
        observer.next(res); 
       }, (err) => { 
        observer.next({}); 
       }); 
      }; 

      reader.readAsArrayBuffer(file); 

Nếu ai đó có một số gợi ý ..

Answer 1

Bạn phải sử dụng XMLHttpRequest để tạo một yêu cầu HTTP nguồn gốc chéo. Ứng dụng gapi không hỗ trợ XMLHttpRequest. (but there is this pull request that's been open for a while) Mặc dù bạn không gửi dữ liệu nhị phân của tệp trong yêu cầu ban đầu, bạn phải sử dụng XMLHttpRequest cho cả yêu cầu ban đầu và yêu cầu tệp được tải lên để url vị trí được trả lại cung cấp tiêu đề phản hồi thích hợp (Access-Control- Allow-Origin: YOUR_URL) và đáp ứng các yêu cầu của CORS.

Đây là một tutorial about CORS and XMLHttpRequest tuyệt vời có thể hữu ích trong việc chuyển đổi yêu cầu của bạn.

Bạn có thể sử dụng thông tin yêu cầu được mô tả trong trang bạn đã liên kết. This example shows the request info nhưng không cung cấp bất kỳ thông tin nào về việc nhận mã thông báo xác thực. But this example does!

tôi đã có thể tải lên thành công tệp tin bằng cách sử dụng đoạn mã sau:

const file = new File(['Hello, world!'], 'hello world.txt', { type: 'text/plain;charset=utf-8' }); 
const contentType = file.type || 'application/octet-stream'; 
const user = gapi.auth2.getAuthInstance().currentUser.get(); 
const oauthToken = user.getAuthResponse().access_token; 
const initResumable = new XMLHttpRequest(); 
initResumable.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable', true); 
initResumable.setRequestHeader('Authorization', 'Bearer ' + oauthToken); 
initResumable.setRequestHeader('Content-Type', 'application/json'); 
initResumable.setRequestHeader('X-Upload-Content-Length', file.size); 
initResumable.setRequestHeader('X-Upload-Content-Type', contentType); 
initResumable.onreadystatechange = function() { 
    if(initResumable.readyState === XMLHttpRequest.DONE && initResumable.status === 200) { 
    const locationUrl = initResumable.getResponseHeader('Location'); 
    const reader = new FileReader(); 
    reader.onload = (e) => { 
     const uploadResumable = new XMLHttpRequest(); 
     uploadResumable.open('PUT', locationUrl, true); 
     uploadResumable.setRequestHeader('Content-Type', contentType); 
     uploadResumable.setRequestHeader('X-Upload-Content-Type', contentType); 
     uploadResumable.onreadystatechange = function() { 
     if(uploadResumable.readyState === XMLHttpRequest.DONE && uploadResumable.status === 200) { 
      console.log(uploadResumable.response); 
     } 
     }; 
     uploadResumable.send(reader.result); 
    }; 
    reader.readAsArrayBuffer(file); 
    } 
}; 

// You need to stringify the request body containing any file metadata 

initResumable.send(JSON.stringify({ 
    'name': file.name, 
    'mimeType': contentType, 
    'Content-Type': contentType, 
    'Content-Length': file.size 
})); 

Nhưng có một repo mạnh mẽ hơn để đối phó với tất cả điều này ở đây: https://github.com/googledrive/cors-upload-sample

Answer 2

Đây là giải pháp BMcV dịch dịch vụ http góc.

const contentType = file.type || 'application/octet-stream'; 
const baseRoot = gapi['config'].get('googleapis.config').root; 

const reader = new FileReader(); 

reader.onload = (e) => { 

    const authHeader = `Bearer ${this.auth.currentUser.get().getAuthResponse().access_token}`; 

    const metadataHeaders = { 
     'Authorization': authHeader, 
     'Content-Type': 'application/json', 
     'X-Upload-Content-Length': file.size, 
     'X-Upload-Content-Type': contentType 
    }; 
    const metadataOptions = new RequestOptions({ headers: new Headers(metadataHeaders) }); 

    const url = `${baseRoot}/upload/drive/v3/files?uploadType=resumable`; 

    const metadata = { 
     'name': file.name, 
     'mimeType': contentType, 
     'Content-Type': contentType, 
     'Content-Length': file.size 
    }; 

    this.http.post(url, metadata, metadataOptions).subscribe(metadataRes => { 

     const locationUrl = metadataRes.headers.get('Location'); 

     const uploadHeaders = { 
      'Content-Type': contentType, 
      'X-Upload-Content-Type': contentType 
     }; 
     const uploadOptions = new RequestOptions({ headers: new Headers(uploadHeaders) }); 

     this.http.put(locationUrl, reader.result, uploadOptions).subscribe(uploadRes => { 
      console.log(uploadRes.json()); 
     }); 
    }, (err) => { 
     console.error(err); 
    }); 
}; 
reader.readAsArrayBuffer(file);