如何使用 post 方法从前端接收文件并将其上传到谷歌云？答案

【问题标题】：How to receive a file from frontend using post method and upload it to google cloud?如何使用 post 方法从前端接收文件并将其上传到谷歌云？
【发布时间】：2020-09-05 16:38:39
【问题描述】：

我正在尝试将文件上传到谷歌存储桶。该文件将使用 post 方法和 form-data 发送到 nodejs 后端路由。我已阅读有关上传文件的 google 存储文档。

我不知道我应该如何接收文件并将其分配给文件名变量，以便可以将其上传到谷歌存储桶。就是这样。

const {Storage} = require('@google-cloud/storage');

// Creates a client
const storage = new Storage();

test: async (req, res, next) => {
    const filename = req.body.file

    // const bucketName = 'Name of a bucket, e.g. my-bucket';
    // const filename = 'Local file to upload, e.g./local/path/to/file.txt';
    await storage.bucket(bucketName).upload(filename, {

        gzip: true,
    
        metadata: {
            cacheControl: 'public, max-age=31536000',
        },
    });

    console.log(`${filename} uploaded to ${bucketName}.`);
    }
}

【问题讨论】：

文件上传后需要调用该函数。为此，您可以使用文件上传包。一个很好的是：github.com/react-dropzone/react-dropzone
实际上，我在 node.js 部分工作，我将使用 post 方法接收文件，并从请求部分将其上传到谷歌存储桶。
请参阅本教程then。你会得到上下文
我也看到了。事实上，我已经尝试在互联网上到处寻找。实际上，发送文件只是整个表单的一部分。我将收到 json +file。我会将文件保存在云存储中，该存储的 url 将与其他表单详细信息一起保存在我的 mongodb 集合中。

标签： node.js reactjs google-cloud-storage multer

【解决方案1】：

我从node-formidable 库的示例中创建了以下代码来处理表单数据和nodejs-Storage 库的sn-ps。确实，我测试过它并且工作得很好，你可能想要自定义文件名等。

const express = require('express');
const formidable = require('formidable');
const {Storage} = require('@google-cloud/storage');
const bucket = 'yourBucketName';

async function uploadFile(bucket, filename) {
  const storage = new Storage();
  const params = {metadata: {cacheControl: 'public, max-age=31536000'}};
  await storage.bucket(bucket).upload(filename, params);
  console.log(`${filename} uploaded to ${bucket}.`);
}

const app = express();

app.get('/', (req, res) => {
  res.send(`
    <h2>With <code>"express"</code> npm package</h2>
    <form action="/api/upload" enctype="multipart/form-data" method="post">
      <div>Text field title: <input type="text" name="title" /></div>
      <div>File: <input type="file" name="someExpressFiles" multiple="multiple" /></div>
      <input type="submit" value="Upload" />
    </form>
  `);
});

app.post('/api/upload', (req, res, next) => {
  const form = formidable();

  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    let imgPath = files.someExpressFiles.path;
    uploadFile(bucket, imgPath).catch(console.error);
    res.json({ fields, files });
  });
});

app.listen(8080, () => {
  console.log('Server listening on http://localhost:8080 ...');
});

【讨论】：

【解决方案2】：

gg docs 解决方案仅适用于开发。如果你在生产中，你的 Nodejs 不会知道文件路径

所以按照以下步骤可能会对您有所帮助：

第 1 步：将图像编码为 base64 并将其发送到后端。

第 2 步：从您的后端，您必须解码这个 base64 并将其上传到 gg 云存储

此链接很有帮助：How do I upload a base64 encoded image (string) directly to a Google Cloud Storage bucket using Node.js?

【讨论】：