我使用 multer、expressJs、NodeJs 上传了一个文件。现在我想在前端保留一个查看按钮来查看最后上传的文件,help ,me out

问题描述 投票:0回答:0

我不知道如何在前端查看文件。

我尝试使用,

``` `let fname = multer.diskStorage({ ```
`filename: (req, file, cb) =>{`
`cb (file.originalname);`
`}`
`})`

`app.get("/", (req, res) => {`
`res.render("uploads");`
`res.render(fname.toString('utf8'))`
``` });` ```

试图将位置转换为字符串并使其呈现,但出现此错误 错误:无法在视图目录“D:\OODU\uploadImagesNodejs iews”中查找视图“[object Object]”

这是我的index.jsenter image description here文件

``` `const express = require("express"); ```
`const app = express();`
`const path = require("path"); //Importing required libraries`
`const multer = require("multer");`

`const storage = multer.diskStorage({`
`destination: (req, file, cb) => {`
`cb(null, "images"); //creating a storage destination for the uploaded files`
`},`

`filename: (req, file, cb) => {`
`console.log(file);`
`cb(`
`null,`
`file.originalname.replace(/.[^/.]/, "") +`
`"_" +`
`Date.now() +`
`path.extname(file.originalname) //Adding timestamp to the file name to make it as an unique ID`
`);`
`},`
`});`

`const maxSize = 2 * 1024 * 1024; //Limiting the file size within 5MB to upload`

`let upload = multer({`
`storage: storage, //File conditions for uploading (i.e: size, type)`
`limits: {`
`fileSize: maxSize,`
`},`
`fileFilter: function (req, file, cb) {`
`let filetypes = /jpeg|jpg|png/;`
`let mimetype = filetypes.test(file.mimetype);`
`let extname = filetypes.test(path.extname(file.originalname).toLowerCase());`

    if (mimetype && extname) {
      return cb(null, true);
    }
    
    cb(
      "Error: File upload only supports the following filetypes: " + filetypes
    );

`},`
`}).single("image");`

`app.set("views", path.join(__dirname, "views"));`
`app.set("view engine", "ejs");`

`let fname = multer.diskStorage({`
`filename: (req, file, cb) =>{`
`cb (file.originalname);`
`}`
`})`

`app.get("/", (req, res) => {`
`res.render("uploads");`
`res.render(fname.toString('utf8'))`
`});`

`app.post("/uploads", (req, res, next) => {`
`upload(req, res, function (err) {`
`if (err) {`
`if (err instanceof multer.MulterError && err.code == "LIMIT_FILE_SIZE") {`
`return res.send("file exceeds the allowed limit");`
`}`
`res.send(err);`
`} else {`
`res.send("uploaded successfully");`
`}`
`});`
`});`

`app.listen(3001);`
``` console.log("3001 is the port");` ```

这是我的upload.ejs文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="justify-content: center; text-align: center;">
    <form action="/uploads" method="post" enctype="multipart/form-data">
      <div><b style="color: blue;"> File size should be within 2mb</b></div>
      <input type="file" name="image" />
      <input type="submit" value="submit" />
      <a href="/images" class="btn"> view uploads </a>
    </form>
  </body>
</html>
node.js express file-upload multer
© www.soinside.com 2019 - 2024. All rights reserved.