如何使用 node.js 和 Express 上传、显示和保存图像

我需要上传一个图像，并显示它，以及保存它，以便我不会失去它时，我刷新本地主机。这需要使用“上传”按钮来完成，它会提示选择文件。

我使用 node.js 和 Express 作为服务器端代码。

299303 次浏览
小开
最佳答案

首先，你应该制作一个包含 文件输入元素的 HTML 表单，你还需要 将表单的 < strong > enctype 属性设置为 < strong > multipart/form-data :

<form method="post" enctype="multipart/form-data" action="/upload">
<input type="file" name="file">
<input type="submit" value="Submit">
</form>

假设表单是在 Html中定义的，它存储在与脚本所在位置相对应的名为 公众人士的目录中，您可以这样做:

const http = require("http");
const path = require("path");
const fs = require("fs");


const express = require("express");


const app = express();
const httpServer = http.createServer(app);


const PORT = process.env.PORT || 3000;


httpServer.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});


// put the HTML file containing your form in a directory named "public" (relative to where this script is located)
app.get("/", express.static(path.join(__dirname, "./public")));

一旦完成，用户将能够上传文件到您的服务器通过该表单。但是要在应用程序中重新组装上载的文件，需要解析请求主体(作为多部分表单数据)。

在 特快3. x中，您可以使用 express.bodyParser中间件来处理多部分表单，但是在 特快4. x中，没有与框架绑定的主体解析器。幸运的是，您可以从 有许多可用的 < strong > multipart/form-data 解析器中选择一个。在这里，我将使用 Multer:

您需要定义一个处理表单帖子的路由:

const multer = require("multer");


const handleError = (err, res) => {
res
.status(500)
.contentType("text/plain")
.end("Oops! Something went wrong!");
};


const upload = multer({
dest: "/path/to/temporary/directory/to/store/uploaded/files"
// you might also want to set some limits: https://github.com/expressjs/multer#limits
});




app.post(
"/upload",
upload.single("file" /* name attribute of <file> element in your form */),
(req, res) => {
const tempPath = req.file.path;
const targetPath = path.join(__dirname, "./uploads/image.png");


if (path.extname(req.file.originalname).toLowerCase() === ".png") {
fs.rename(tempPath, targetPath, err => {
if (err) return handleError(err, res);


res
.status(200)
.contentType("text/plain")
.end("File uploaded!");
});
} else {
fs.unlink(tempPath, err => {
if (err) return handleError(err, res);


res
.status(403)
.contentType("text/plain")
.end("Only .png files are allowed!");
});
}
}
);

在上面的示例中，发送到 /上载的 。 png文件将被保存到相对于脚本所在位置的 已上传目录中。

为了显示上传的图像，假设您已经有一个包含 IMG元素的 HTML 页面:

<img src="/image.png" />

你可以在你的快递应用程序中定义另一条路线，并使用 res.sendFile服务存储的图像:

app.get("/image.png", (req, res) => {
res.sendFile(path.join(__dirname, "./uploads/image.png"));
});

提交答案