Google Drive API Javascript를 통해 URL에서 Google Drive로 이미지 업로드

Aug 18 2020

나는 Javascript가 처음이며 내 질문이 절름발이로 보이면 죄송합니다. 내 웹 사이트에서 내 Google 드라이브로 이미지를 업로드하고 싶습니다. 인증 및 폴더 생성 부분을 성공적으로 구현했지만 업로드 과정이 혼란 스럽습니다.
다음은 Google 드라이브 내부에 폴더를 만드는 코드입니다.

function createFolder(folderName) {
  var parentId = 'xxxxxxx';//some parentId of a folder under which to create the new folder
  var fileMetadata = {
    'name' : folderName,
    'mimeType' : 'application/vnd.google-apps.folder',
    'parents': [parentId]
  };
  gapi.client.drive.files.create({
    resource: fileMetadata,
  }).then(function(response) {
    switch(response.status){
      case 200:
      var file = response.result;
      console.log('Created Folder Id: ', file.id);
      uploadImage(file.id);
      break;
      default:
      console.log('Error creating the folder, '+response);
      break;
    }
  });
}

이제이 URL에서 내 이미지 https://xxxxxx.com를 상단 응답에서 새로 만든 폴더로 업로드하고 싶습니다 ( file.id)

이것은 Google API 문서에있는 것이지만 URL을 어디에 넣거나 첨부해야합니까?

function uploadImage(folderId) {
  var fileMetadata = {
    'name': 'photo.jpg',
    parents: [folderId]
  };
  var media = {
    mimeType: 'image/jpeg',
    body: fs.createReadStream('files/photo.jpg')
  };
  drive.files.create({
    resource: fileMetadata,
    media: media,
    fields: 'id'
  }, function (err, file) {
    if (err) {
      // Handle error
      console.error(err);
    } else {
      console.log('File Id: ', file.id);
    }
  });
}

많은 감사드립니다.

답변

1 Tanaike Aug 19 2020 at 08:26

나는 당신의 목표를 다음과 같이 믿습니다.

URL에서 파일을 다운로드하고 다운로드 한 파일을 Javascript를 사용하여 Google 드라이브에 업로드하려고합니다.
귀하의 경우 gapi.clientGoogle 드라이브에 파일을 업로드하는 데 사용할 수 있습니다.

수정 지점 :

현재 단계에서는 안타깝게도 gapi.client.drive.files.create콘텐츠를 포함한 요청을 아직 보낼 수없는 것 같습니다 . Ref 따라서이 경우 fetch에는 해결 방법 으로 사용할 것을 제안하고 싶습니다 . 때 fetch사용되며, 파일 내용과 메타 데이터로 요청할 수 있습니다 multipart/form-data.
이 해결 방법에서 액세스 토큰은 gapi.client. 따라서이 스크립트 gapi.client는 파일 업로드에 사용할 수 있다고 가정 합니다. 조심하세요.

수정 된 스크립트 :

const url = "###";  // Please set the URL.
const fileName = "sample filename";
const folderId = "###";  // Please set the folder ID.

fetch(url).then(res => res.blob()).then(blob => {
  const form = new FormData();
  form.append('metadata', new Blob([JSON.stringify({name: fileName, parents: [folderId]})], {type: 'application/json'}));
  form.append('file', blob);
  fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
    method: 'POST',
    headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
    body: form
  }).then(res => res.json()).then(val => console.log(val));
});

이 스크립트를 실행하면 콘솔에서 다음 결과를 볼 수 있습니다. (URL이 Jpeg 이미지 파일의 직접 링크 인 경우.)
```
  {
    "kind": "drive#file",
    "id": "###",
    "name": "sample filename",
    "mimeType": "image/jpeg"
  }
```

노트 :

이 경우 uploadType=multipart사용됩니다. 따라서 최대 파일 크기는 5MB입니다. 조심하세요. 5MB 이상을 사용하려면 재개 가능한 업로드를 확인하십시오. Ref

참조 :

Fetch 사용
파일 데이터 업로드

추가 :

CORS와 관련된 오류를 피하기 위해 다른 방법으로 Web Apps를 래퍼로 사용할 것을 제안하고 싶습니다. 이 경우 클라이언트 측은 Javascript입니다. 이 자바 스크립트는 Google 외부에서 사용할 수 있습니다.

용법:

다음 흐름을 수행하십시오.

1. Google Apps Script의 새 프로젝트를 만듭니다.

Web Apps의 샘플 스크립트는 Google Apps Script입니다. 따라서 Google Apps Script 프로젝트를 만드십시오.

직접 생성하려면 https://script.new/. 이 경우 Google에 로그인되어 있지 않으면 로그인 화면이 열립니다. 그러니 Google에 로그인하십시오. 이에 따라 Google Apps Script의 스크립트 편집기가 열립니다.

Google Drive API Javascript를 통해 URL에서 Google Drive로 이미지 업로드

답변

수정 지점 :

수정 된 스크립트 :

노트 :

참조 :

추가 :

용법:

1. Google Apps Script의 새 프로젝트를 만듭니다.

2. 스크립트를 준비합니다.

3. 웹 앱을 배포합니다.

4. 클라이언트 측에서 서버 측으로 파일을 업로드합니다.

노트 :

참조 :

선적 서류 비치