栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用node.js上载,显示和保存图像并表达

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用node.js上载,显示和保存图像并表达

首先,您应该制作一个包含文件input元素的HTML表单。您还需要将表单的 enctype 属性设置为 multipart / form-
data

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

假设在 index.html 中定义了表单,该表单存储在相对于脚本所在位置的名为 public 的目录中,则可以通过以下方式提供该表单:

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(3000, () => {  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")));

完成后,用户将可以通过该表单将文件上传到您的服务器。但是要在您的应用程序中重组上载的文件,您需要解析请求正文(作为多部分表单数据)。

Express 3.x中, 您可以使用

express.bodyParser
中间件来处理多部分表单,但是从 Express 4.x开始
,该框架没有捆绑任何正文解析器。幸运的是,您可以从众多可用的 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" ),  (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!");      });    }  });

在上面的示例中,发布到 / upload的* .png 文件将保存到相对于脚本所在位置的上 目录。 ***

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

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

您可以在快速应用中定义其他路线,并用于

res.sendFile
提供存储的图像:

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/382066.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号