В этом пошаговом руководстве описывается, как создать веб-форму для загрузки файлов на Google Диск с помощью Node.js, Express и Multer.
Веб-форма кодирует файлы как multipart/form-data и отправляет данные в запросе POST в приложение Node.js. Multer — это промежуточное ПО Express для обработки данных составных форм.
1. Создайте HTML-форму
HTML-форма содержит поле загрузки файла, которое позволяет загружать несколько файлов. Он также включает текстовые поля для имени респондента, адреса электронной почты и страны.
Когда форма отправляется, она использует встроенный в браузер File API для отправки файлов в приложение Node.js.
<! DOCTYPE html > < html > < head > < meta charset = " utf-8 " /> < meta name = " viewport " content = " width=device-width, initial-scale=1 " /> </ head > < body > < form > < input type = " file " name = " Files " required multiple /> < input type = " text " name = " Name " placeholder = " Name " /> < input type = " email " name = " Email Address " placeholder = " Email " required /> < input type = " text " name = " Country " placeholder = " Country " /> < button type = " submit " > Submit </ button > </ form > </ body > < script > const formElem = document . querySelector ( 'form' ) ; formElem . addEventListener ( 'submit' , async ( e ) => { e . preventDefault ( ) ; await fetch ( '/upload' , { method : 'POST' , body : new FormData ( formElem ) , } ) ; } ) ; </ script > </ html >
2. Создайте приложение Node.js
Приложение Node.js получит файлы из формы и загрузит их на Google Диск. Домашний маршрут отобразит HTML-страницу, содержащую форму.
// index.js const express = require ( 'express' ) ; const uploadRouter = require ( './router' ) ; const app = express ( ) ; app . get ( '/' , ( _ , res ) => { res . sendFile ( ` ${ __dirname } /index.html ` ) ; } ) ; app . use ( express . json ( ) ) ; app . use ( express . urlencoded ( { extended : true } ) ) ; app . use ( uploadRouter ) ; app . listen ( 8080 , ( ) => { console . log ( 'Form running on port 8080' ) ; } ) ;
3. Маршрутизатор загрузки Google Диска
Multer добавляет объект тела и объект файлов к объекту запроса. Объект body содержит текстовые поля формы, а объект files будет содержать файлы, загруженные через форму.
Вы можете аутентифицировать службу Google Диска с помощью служебной учетной записи . Создайте новую папку на Google Диске, поделитесь этой папкой с адресом электронной почты учетной записи службы и замените DRIVE_FOLDER_ID на идентификатор папки.
// router.js const stream = require ( 'stream' ) ; const express = require ( 'express' ) ; const multer = require ( 'multer' ) ; const { google } = require ( 'googleapis' ) ; const uploadRouter = express . Router ( ) ; const upload = multer ( ) ; const uploadFile = async ( fileObject ) => { const bufferStream = new stream . PassThrough ( ) ; bufferStream . end ( fileObject . buffer ) ; const { data } = await google . drive ( { version : 'v3' } ) . files . create ( { media : { mimeType : fileObject . mimeType , body : bufferStream , } , requestBody : { name : fileObject . originalname , parents : [ 'DRIVE_FOLDER_ID' ] , } , fields : 'id,name' , } ) ; console . log ( ` Uploaded file ${ data . name } ${ data . id } ` ) ; } ; uploadRouter . post ( '/upload' , upload . any ( ) , async ( req , res ) => { try { const { body , files } = req ; for ( let f = 0 ; f < files . length ; f += 1 ) { await uploadFile ( files [ f ] ) ; } console . log ( body ) ; res . status ( 200 ) . send ( 'Form Submitted' ) ; } catch ( f ) { res . send ( f . message ) ; } } ) ; module . exports = uploadRouter ;