อัปโหลดรูปภาพจาก URL ไปยัง Google Drive ผ่าน Google Drive API Javascript

Question

ฉันเป็นคนใหม่ใน Javascript และขออภัยหากคำถามของฉันดูเหมือนจะไม่ดีสำหรับคุณ ฉันต้องการอัปโหลดรูปภาพจากเว็บไซต์ไปยัง Google Drive ฉันติดตั้งส่วนการรับรองความถูกต้องและการสร้างโฟลเดอร์สำเร็จแล้ว แต่ฉันสับสนเกี่ยวกับขั้นตอนการอัปโหลด
บอกว่านี่คือรหัสของฉันสำหรับสร้างโฟลเดอร์ใน Google Drive:

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

ขอบคุณมากในล่วงหน้า.

Answer 1

ฉันเชื่อว่าเป้าหมายของคุณดังต่อไปนี้

• คุณต้องการดาวน์โหลดไฟล์จาก URL และอัปโหลดไฟล์ที่ดาวน์โหลดไปยัง Google Drive โดยใช้ Javascript
• ในกรณีของคุณคุณgapi.clientสามารถใช้สำหรับการอัปโหลดไฟล์ไปยัง Google Drive

จุดแก้ไข:

• ในขั้นตอนปัจจุบันน่าเสียดายที่ดูเหมือนว่า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จะใช้ ดังนั้นขนาดไฟล์สูงสุดคือ 5 MB โปรดระวังเรื่องนี้ เมื่อคุณต้องการใช้งานมากกว่า 5 MB โปรดตรวจสอบการอัปโหลดต่อได้ อ้างอิง

อ้างอิง:

• ใช้ Fetch
• อัปโหลดข้อมูลไฟล์

เพิ่ม:

เพื่อหลีกเลี่ยงข้อผิดพลาดที่เกี่ยวข้องกับ CORS เป็นอีกวิธีหนึ่งฉันขอเสนอให้ใช้ Web Apps เป็นเครื่องห่อหุ้ม ในกรณีนี้ฝั่งไคลเอ็นต์คือ Javascript สามารถใช้ Javascript นี้ได้ที่ภายนอก Google

การใช้งาน:

โปรดทำตามขั้นตอนต่อไปนี้

1. สร้างโครงการใหม่ของ Google Apps Script

สคริปต์ตัวอย่างของ Web Apps คือสคริปต์ของ Google Apps ดังนั้นโปรดสร้างโครงการของ Google Apps Script

หากคุณต้องการสร้างโดยตรงโปรดเข้าไปที่ https://script.new/. ในกรณีนี้หากคุณไม่ได้เข้าสู่ระบบ Google หน้าจอเข้าสู่ระบบจะเปิดขึ้น ดังนั้นโปรดลงชื่อเข้าใช้ Google ด้วยเหตุนี้ตัวแก้ไขสคริปต์ของ Google Apps Script จะเปิดขึ้น

2. เตรียมสคริปต์

โปรดคัดลอกและวางสคริปต์ต่อไปนี้ (Google Apps Script) ลงในโปรแกรมแก้ไขสคริปต์ สคริปต์นี้ใช้สำหรับ Web Apps

ฝั่งเซิร์ฟเวอร์: Google Apps Script

สคริปต์นี้ใช้สำหรับ Web Apps ในกรณีนี้ Web Apps จะใช้เป็น Wrapper

function doGet(e) {
  const imageUrl = e.parameter.imageUrl;
  const res = UrlFetchApp.fetch(imageUrl);
  if (res.getResponseCode() != 200) throw new Error("Image couldn't be retrieved.");
  const blob = res.getBlob();
  const file = DriveApp.getFolderById(e.parameter.folderId).createFile(blob.setName(e.parameter.filename));
  const obj = {id: file.getId(), name: file.getName(), mimeType: file.getMimeType()};
  return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON);
}

3. ปรับใช้ Web Apps

1. ในโปรแกรมแก้ไขสคริปต์เปิดกล่องโต้ตอบโดย "เผยแพร่" -> "ปรับใช้เป็นเว็บแอป"
2. เลือก"ฉัน"สำหรับ"รันแอพพลิเป็น"
   • ด้วยเหตุนี้สคริปต์จะถูกเรียกใช้ในฐานะเจ้าของ
3. เลือก"ทุกคนแม้จะไม่ระบุชื่อ"สำหรับ"ใครมีสิทธิ์เข้าถึงแอป"
4. คลิกปุ่ม "ปรับใช้" เป็น "เวอร์ชันโครงการ" ใหม่
5. เปิดกล่องโต้ตอบ "ต้องมีการอนุญาต" โดยอัตโนมัติ
   1. คลิก "ตรวจสอบสิทธิ์"
   2. เลือกบัญชีของตัวเอง
   3. คลิก "ขั้นสูง" ที่ "แอปนี้ไม่ได้รับการยืนยัน"
   4. คลิก "ไปที่ ### ชื่อโครงการ ### (ไม่ปลอดภัย)"
   5. คลิกปุ่ม "อนุญาต"
6. คลิก "ตกลง"
7. คัดลอก URL ของ Web Apps มันเหมือนกับhttps://script.google.com/macros/s/###/exec.
   • เมื่อคุณแก้ไข Google Apps Script โปรดปรับใช้เป็นเวอร์ชันใหม่ ด้วยเหตุนี้สคริปต์ที่แก้ไขจะแสดงไปยัง Web Apps โปรดระวังเรื่องนี้

4. อัปโหลดไฟล์จากฝั่งไคลเอ็นต์ไปยังฝั่งเซิร์ฟเวอร์

ฝั่งไคลเอ็นต์: HTML & Javascript

โปรดตั้งค่า URL ของเว็บแอปของคุณเป็นสคริปต์ต่อไปนี้ และโปรดตั้งชื่อไฟล์และ ID โฟลเดอร์

const imageUrl = "###"; // Please set the URL of image.

const url = "https://script.google.com/macros/s/###/exec"; // Please set the URL of Web Apps.
const qs = new URLSearchParams({
  imageUrl: imageUrl,
  filename: "sample filename",
  folderId: "###", // Please set folder ID.
});
fetch(`${url}?${qs}`).then((res) => res.json()).then(console.log).catch(console.log);

ผลลัพธ์:

เมื่อเรียกใช้สคริปต์ด้านบนค่าต่อไปนี้จะถูกส่งกลับ คุณสามารถดูค่าที่ส่งคืนได้ที่คอนโซล

{
  "id": "###",
  "name": "###",
  "mimeType": "###"
}

บันทึก:

• เมื่อคุณแก้ไขสคริปต์ของ Web Apps โปรดปรับใช้ Web Apps เป็นเวอร์ชันใหม่ ด้วยเหตุนี้สคริปต์ล่าสุดจะปรากฏใน Web Apps โปรดระวังเรื่องนี้

อ้างอิง:

• เว็บแอป
• การใช้ประโยชน์จาก Web Apps ด้วย Google Apps Script

Answer 2

ลองอัปโหลดไฟล์ภาพถ่ายของคุณโดยใช้ตัวอย่างข้อมูลนี้:

// download file from website 
const http  = require('https')
const fs    = require('fs')

let file    = fs.createWriteStream('Photo001.jpg')
let request = http.get(
    'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x.png', 
    (response) => {
        response.pipe(file)
    })

// upload file to Google Drive
let fileMetadata = {
  'name'    : 'Photo001',
  'mimeType': 'image/jpeg'
}

let media = {
  mimeType  : 'image/jpeg',
  body      : fs.createReadStream('Photo001.jpeg')
}

function uploadFile(auth){

  const drive = google.drive({version: 'v3', auth})

  drive.files.create({
    resource: fileMetadata,
    media   : media,
    fields  : 'id'
  }, (err, res) => {
    if (err) return console.log('The API returned an error: ' + err)
  })

}

เอกสารประกอบ

• ไฟล์: สร้าง