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

Question

我有这个表单元素：

  <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这是完全错误的。

那么我如何预先设置谷歌云将接受的正确文件路径？ 我知道浏览器会保护文件上传的实际文件路径，但它没有填写临时或假路径以便上传图像。

请帮忙，因为谷歌云文档在这个问题上非常含糊......

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

Answer 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=""> <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>

您可以参考此文档以获取更多信息