nodejs 图片预览和上传的示例代码

下面是关于“nodejs 图片预览和上传”的完整攻略。

步骤一：安装依赖

在开始编写nodejs图片上传和预览的代码前，需要安装必要的依赖项。首先进入项目文件夹，打开命令行工具，执行以下命令：

npm init -y

这个命令会自动生成一个package.json文件，保存项目的信息和依赖项。接下来，安装express和multer依赖包：

npm install express multer --save

其中，express是nodejs开发框架，用于处理http请求和构建web应用程序；multer是一个node.js中间件，用于处理multipart/form-data类型的数据（主要用于文件上传）。

步骤二：编写图片上传和预览代码

1、上传图片的代码

接下来，我们将图片上传和预览的代码拆分成两个文件：app.js和upload.js。首先是图片上传的代码。

在app.js中，编写以下代码：

const express = require('express');
const multer = require('multer');
const upload = require('./upload');

const app = express();

app.use(express.static('public')); // 静态文件路由
app.use(express.json()); // 解析json格式的请求体
app.use(express.urlencoded({ extended: true })); // 解析表单格式的请求体

app.post('/upload', upload.single('image'), (req, res) => {
  console.log(req.file);
  res.json({ message: '上传成功' });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

在这个文件中，我们引入了express和multer依赖包，再引入upload模块。同时，我们配置了express的静态文件路由和请求体解析器。

在处理图片上传的路由上，我们使用了upload.single('image')中间件，表示只处理读取名为image的单个文件。当上传完成后，服务器会返回一个json格式的消息，表示上传成功。

2、预览图片的代码

在upload.js文件中，我们编写以下代码：

const multer = require('multer');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/uploads');
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  },
});

const fileFilter = (req, file, cb) => {
  if (file.mimetype.startsWith('image/')) {
    cb(null, true);
  } else {
    cb(new Error('文件类型不是图片类型'), false);
  }
};

const upload = multer({
  storage: storage,
  fileFilter: fileFilter,
  limits: { fileSize: 1024 * 1024 },
});

module.exports = upload;

这个文件中，我们将multer模块进行配置。我们设置了文件上传后的存储路径，文件名的生成方式（通过当前时间戳和原始文件名），还设置了文件的过滤器，只允许上传图片类型的文件。同时，我们还设置了文件的大小限制为1MB。

步骤三：前端页面编写

我们接下来将制作前端页面上传图片，预览图片等功能，创建以下文件：

/public/index.html: 网站的首页，包含上传图片表单以及预览图片功能。

在这个HTML文件中，我们编写以下代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>图片上传预览示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    form {
      margin: 16px;
      padding: 32px;
      border: 2px dashed #ccc;
      text-align: center;
    }

    .preview {
      display: flex;
      flex-wrap: wrap;
    }

    .preview-item {
      margin: 8px;
    }

    .preview-image {
      max-width: 200px;
      max-height: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">上传</button>
  </form>

  <h2>图片预览</h2>
  <div class="preview"></div>

  <script>
    $(document).ready(function () {
      $('form').submit(function (e) {
        e.preventDefault();
        $.ajax({
          url: '/upload',
          type: 'POST',
          data: new FormData(this),
          processData: false,
          contentType: false,
          success: function (data) {
            alert(data.message);
          },
        });
      });

      $('input[type="file"]').change(function (e) {
        $('.preview').empty();
        for (let i = 0; i < e.target.files.length; i++) {
          let file = e.target.files[i];
          let reader = new FileReader();
          reader.onload = function (e) {
            let html = `<div class="preview-item"><img class="preview-image" src="${e.target.result}"></div>`;
            $('.preview').append(html);
          };
          reader.readAsDataURL(file);
        }
      });
    });
  </script>
</body>

</html>

这个HTML文件中，我们在表单中添加了上传图片的文件选择器和上传按钮。当点击上传按钮时，会发送jQuery的ajax请求，将图片上传到/upload的路由上。

同时，在这个文件中我们还使用了jQuery编写了图片预览的功能。当用户选择图片文件时，我们使用FileReader读取文件并转成DataURL，再通过HTML元素展示出来。

步骤四：运行服务器

最后，我们可以运行服务器，打开网站首页index.html，上传图片并实现预览功能。

在命令行中输入以下命令可以启动服务器：

node app.js

这样就完成了一个基本的nodejs图片上传和预览的示例代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs 图片预览和上传的示例代码 - Python技术站