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

Question

I have this form element:

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

When I submit the form, the post request is getting the file name of the image through 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");
});

The console.log returns just the file name image.jpg without the path. When the uploadFile() method is called it returns an error saying that the file path does not exist, because it is saying the file path is: C:\\\\Users\\Owner\\Desktop\\Serverfolder\\image.jpg which is completely wrong.

So how do I prepend the right file path that google cloud will accept? I know that the browser will protect the actual file path for file uploads, but it is not filling in the temporary or fakepath so that the image can be uploaded.

Please help, because the google cloud documentation is annoyingly vague on the matter...

Answer 1

The file path should be referenced within the scope of your server. What you can do is store the file in a folder called uploads with multer. Then reference the relative path into uploadFile() and upload it. It should get the file then. Once you've uploaded you can then use the fs node package to delete the file.

Here is the multer configuration i used

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

And this is the code that uploads it

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

you have to put all the header in the hidden text tag

 <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>

you can refer to this documentation for further information