在 node.js 中将文件上传到 Google Cloud Storage 时出错答案

【问题标题】：Error when uploading file to Google Cloud Storage in node.js在 node.js 中将文件上传到 Google Cloud Storage 时出错
【发布时间】：2021-01-05 20:01:31
【问题描述】：

我有这个表单元素：

  <form action="/upload" method="POST">
      <input type="file" id="img" name="image" accept="image/*" class="btn"/>
      <button type="submit" class="btn">Upload</button>
  </form>

当我提交表单时，post 请求正在通过 body-parser 获取图像的文件名。

app.post("/upload", (req, res) => {
  console.log(req.body.image);
  const filename = req.body.image;
  async function uploadFile() {
    await storage.bucket(bucketName).upload(filename)
  }
  uploadFile().catch(console.error);
  res.redirect("/upload");
});

console.log 只返回文件名image.jpg，不带路径。当调用uploadFile() 方法时，它返回一个错误，说文件路径不存在，因为它说文件路径是：C:\\Users\Owner\Desktop\Serverfolder\image.jpg 这是完全错误的。

那么，我该如何添加谷歌云接受的正确文件路径呢？我知道浏览器会保护文件上传的实际文件路径，但它不会填写临时或假路径以便上传图片。

请帮忙，因为谷歌云文档在这件事上含糊不清……

【问题讨论】：

标签： node.js file-upload google-cloud-storage ejs filepath

【解决方案1】：

文件路径应在您的服务器范围内引用。您可以做的是将文件存储在名为 uploads with multer 的文件夹中。然后将相对路径引用到uploadFile() 并上传。然后它应该获取文件。上传后，您可以使用 fs 节点包删除文件。

这是我使用的 multer 配置

// Multer config
const multer = require('multer');
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'blog-images/')
    },
    filename: function (req, file, cb) {
        let tempImageName = file.mimetype.toString().split('/')[1];
        req.imageName = tempImageName
      cb(null, tempImageName)
    }
  })
  var upload = multer({ storage: storage })

这是上传它的代码

app.post('/upload', upload.single('image'), (req, res)=>{
 //blog-images below is the custom folder i created. I can easily reference it
//since it is a part of the server
  let imagePath = `blog-images/${req.imageName}`
  // The code is split here but essentially, it solves the file path problem
  uploadBlog(imagePath, req.body)
  .then( uploadRef => {
    // The fs module deletes it from the folder so you don't have to worry about
    // uncessary files
    fs.unlink(imagePath, ()=>{
      res.send('upload success')
     })
   }).catch(err => console.log(err.message))
})

【讨论】：

不，但我在工作的表单中有 fakepath 目录作为预览图像。只是不知道如何将它传递回我的服务器文件中的发布请求。
您必须使用像 multer 这样的中间件，因为这是您访问存储图像文件的 req.file 属性的唯一方法。
@Tenotea 我添加了 multer 并且现在可以访问 req.file ，但这仍然不能使我的 uploadFile() 函数工作。关于文件路径，我仍然遇到同样的错误。该函数是直接从google cloud docs复制的...
我没有生气，你是唯一帮助我的人。为了避免激怒版主，您应该做的是将其发布到答案中，并展示如何做的简短演示。
@Tenotea 谢谢，看起来不错。上传工作（仍然需要调整它以将表单数据作为文件名等），但我仍然无法让文件删除部分工作。现在它说uploadBlog is not defined。我试图调整它，但无法让它工作。你确定那部分代码是正确的吗？再次感谢...

【解决方案2】：

你必须把所有的标题放在隐藏的文本标签中

<form action="https://storage.googleapis.com/travel-maps" method="post" enctype="multipart/form-data">
<input type="text" name="key" value="test-object">
<input type="hidden" name="Content-Type" value="image/jpeg">
<input type="hidden" name="success_action_redirect" value="https://www.example.com/success_notification.html">
<input type="hidden" name="policy" value="eyJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJ0cmF2ZWwtbWFwcyJ9LHsiY29udGVudC10eXBlIjoiaW1hZ2UvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fcmVkaXJlY3QiOiJodHRwOi8vd3d3LmV4YW1wbGUuY29tL3N1Y2Nlc3Nfbm90aWZpY2F0aW9uLmh0bWwifSx7ImtleSI6InRlc3Qtb2JqZWN0In0seyJ4LWdvb2ctZGF0ZSI6IjIwMjAwMTIzVDA0MzUzMFoifSx7IngtZ29vZy1jcmVkZW50aWFsIjoiZXhhbXBsZV9hY2NvdW50QGV4YW1wbGVfcHJvamVjdC5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbS8yMDE5MTEwMi9hdXRvL3N0b3JhZ2UvZ29vZzRfcmVxdWVzdCJ9LHsieC1nb29nLWFsZ29yaXRobSI6IkdPT0c0LVJTQS1TSEEyNTYifV0sImV4cGlyYXRpb24iOiIyMDIwLTAxLTIzVDA0OjM1OjQwWiJ9">
<input type="hidden" name="x-goog-algorithm" value="GOOG4-RSA-SHA256">
<input type="hidden" name="x-goog-credential" value="example_account@example_project.iam.gserviceaccount.com/20191102/auto/storage/goog4_request">
<input type="hidden" name="x-goog-date" value="20191102T043530Z">
<input type="hidden" name="x-goog-signature" value="58bc39b8f604ee1f18171fee4828ef8967f3d2721676570e115d68c2f133820cbb833976f18955516b2b7d0c3d9660fea613a2ad90c240bd02c1eefa4a55e9038ce74dcfdd34e278ea0436e261131a36fa4e922f0a077ca1c9842f654928aac3ca7f9341075f9db275d8286b5ef13e7f91b4837e77b2a6dbea83f86b90f848331053d8a6b1fbc26787992e7fb819a2005bae9b3026b9c7d1158e88e4a2018f13757083c7873241d2dfe6ea46a17cd6f3d090f3e0da44ccfbd6bc425124de1bea744a32f3ab175672a991ef274cd83550eca57ea591b85fa9799098a38ec552dc3ec679c431491444820624f5c4ba0c8cf87d60af89899afce2a90325c6966dcf">

<input name="file" type="file">
<input type="submit" value="Upload">
</form>

您可以参考此documentation 了解更多信息

【讨论】：