让我们编写一个简单的 Web 应用程序，它允许用户将文件上传到 Google Cloud Storage 而无需身份验证。应用程序的客户端站点将有一个带有一个或多个输入字段的 HTML 表单。服务器端是一个处理文件上传的 Node.js 应用程序。该应用程序可以部署到 Google Cloud Run、Firebase Function 或作为 Google Cloud Function。
HTML 表单
我们的 HTML 表单包括一个名称字段和一个只接受图像文件的文件输入字段。这两个字段都是必需的。
当用户提交表单时，表单数据被发送到服务器，编码为 multipart/form-data，使用 Fetch API。服务器将验证表单数据，如果表单有效，它会将文件上传到 Google Cloud Storage。
< form method = " post " enctype = " multipart/form-data " > < input type = " text " name = " name " id = " name " placeholder = " Your name " required /> < input type = " file " name = " image " accept = " image/* " required /> < input type = " submit " value = " Submit Form " /> </ form > < script > const formElem = document . querySelector ( 'form' ) ; formElem . addEventListener ( 'submit' , async ( e ) => { e . preventDefault ( ) ; const formData = new FormData ( ) ; formData . append ( 'name' , e . target [ 0 ] . value ) ; formData . append ( 'file' , e . target [ 1 ] . files [ 0 ] ) ; const response = await fetch ( '/submitform' , { method : 'POST' , body : formData , } ) ; const data = await response . text ( ) ; return data ; } ) ; </ script >
Node.js 应用程序
我们的应用程序将有两条路线：
- 将显示表单的主 (/) 路由。
- 将处理文件上传的提交表单路由。
// index.js const express = require ( 'express' ) ; const router = require ( './router' ) ; const app = express ( ) ; app . get ( '/' , ( _ , res ) => { res . sendFile ( ` ${ __dirname } /index.html ` ) ; } ) ; app . use ( express . json ( { limit : '50mb' } ) ) ; app . use ( express . urlencoded ( { extended : true , limit : '50mb' } ) ) ; app . use ( router ) ; app . listen ( process . env . PORT || 8080 , async ( ) => { console . log ( 'listening on port 8080' ) ; } ) ;
由于 Express 服务器无法处理多部分表单数据，我们使用 Multer 中间件来解析包含文本内容和二进制数据的表单数据。此外，我们丢弃了上传文件的原始文件名，并分配了从uuid库生成的我们自己的唯一文件名。
// router.js const express = require ( 'express' ) ; const { Storage } = require ( '@google-cloud/storage' ) ; const { v4 : uuidv4 } = require ( 'uuid' ) ; const multer = require ( 'multer' ) ; const storage = new Storage ( ) ; const router = express . Router ( ) ; const upload = multer ( ) ; router . post ( '/submit' , upload . single ( 'file' ) , async ( req , res ) => { const { name } = req . body ; const { mimetype , originalname , size } = req . file ; if ( ! mimetype || mimetype . split ( '/' ) [ 0 ] !== 'image' ) { return res . status ( 400 ) . send ( 'Only images are allowed' ) ; } if ( size > 10485760 ) { return res . status ( 400 ) . send ( 'Image must be less than 10MB' ) ; } const bucketName = '<<GOOGLE_CLOUD_STORAGE_BUCKET_NAME>>' ; const fileExtension = originalname . split ( '.' ) . pop ( ) ; const fileName = ` ${ uuidv4 ( ) } . ${ fileExtension } ` ; const file = storage . bucket ( bucketName ) . file ( fileName ) ; await file . save ( req . file . buffer , { contentType : mimetype , resumable : false , public : true , } ) ; const url = ` https://storage.googleapis.com/ ${ bucketName } / ${ fileName } ` ; console . log ( ` File uploaded by ${ name } ` , url ) ; return res . status ( 200 ) . send ( url ) ; } ) ; module . exports = router ;
使用 Firebase 函数
如果您计划将文件上传应用程序部署到 Firebase 函数，则需要进行一些更改，因为我们的 Multer 中间件与 Firebase 函数不兼容。
作为一种解决方法，我们可以在客户端将图像转换为 base64，然后将图像上传到 Google Cloud Storage。或者，您可以使用Busboy中间件来解析表单数据。
const convertBase64 = ( file ) => { return new Promise ( ( resolve , reject ) => { const fileReader = new FileReader ( ) ; fileReader . readAsDataURL ( file ) ; fileReader . onload = ( ) => { const base64String = fileReader . result ; const base64Image = base64String . split ( ';base64,' ) . pop ( ) ; resolve ( base64Image ) ; } ; fileReader . onerror = ( error ) => { reject ( error ) ; } ; } ) ; } ; const handleUpload = async ( file ) => { const base64 = await convertBase64 ( file ) ; const { type , size , name } = file ; const response = await fetch ( '/submitform' , { headers : { 'Content-Type' : 'application/json' } , method : 'POST' , body : JSON . stringify ( { type , size , name , base64 } ) , } ) ; const url = await response . text ( ) ; console . log ( ` File uploaded by ${ name } ` , url ) ; } ;
必须调整提交表单处理程序以将 base64 图像转换为缓冲区，然后将图像上传到 Google Cloud Storage。
router . post ( '/upload' , async ( req , res ) => { const { name , type , size , base64 } = req . body ; const buffer = Buffer . from ( base64 , 'base64' ) ; await file . save ( buffer , { contentType : type , resumable : false , public : true , } ) ; return res . send ( ` File uploaded ` ) ; } ) ;
跨域请求的 Cors
如果您在与表单处理程序不同的域上提供表单，则需要将cors中间件添加到您的应用程序中。
const cors = require ( 'cors' ) ( { origin : true } ) ; app . use ( cors ) ;
您应该将 Google Cloud Storage 存储桶的访问控制策略设置为“细粒度”而不是“统一”。当单个文件上传到 Cloud Storage 时，它们是公开的，但容器文件夹仍然是私有的。
原文： https://www.labnol.org/file-upload-form-google-cloud-storage-220426