详解nodejs实现本地上传图片并预览功能（express4.0+）

以下是详解“详解nodejs实现本地上传图片并预览功能（express4.0+）”的完整攻略。

1. 确定目标

本文将讲解如何使用 Node.js 和 Express4.0+ 实现本地上传图片并预览功能。具体来说，我们要实现以下功能：

用户可以在网页上选择一张本地图片，并将其上传至服务器；
上传完成后，网页上会立即显示上传的图片以供用户预览。

2. 编写服务端代码

下面是服务端的代码实现步骤：

2.1 安装依赖

在package.json文件中添加express和multer的依赖，并使用npm进行安装：

{
  "dependencies": {
    "express": "^4.17.1",
    "multer": "^1.4.3"
  }
}

2.2 创建 Express 应用

在项目目录下新建一个名为app.js的文件，编写以下代码创建 Express4.0+ 应用：

// app.js

const express = require('express');
const app = express();

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

这段代码会创建一个 Express 应用，并监听localhost:3000上的请求。

2.3 实现文件上传

在app.js中添加以下代码：

// app.js

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('image'), (req, res) => {
  res.send({ fileUrl: `http://localhost:3000/${req.file.filename}` });
});

这段代码会将上传文件保存到uploads/目录下，并将上传成功后的文件 url 发送给前端。

至此，服务端的代码已经实现完毕。

3. 编写客户端代码

下面是客户端的代码实现步骤：

3.1 创建 HTML 文件

在项目的根目录下创建一个名为index.html的文件，并编写以下基本的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片上传和预览</title>
</head>
<body>
  <form id="upload-form" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">上传图片</button>
  </form>
  <div id="preview"></div>
</body>
</html>

这段代码会创建一个文件上传的表单和一个用于显示预览图片的div元素。

3.2 编写 JavaScript 代码

在index.html中添加以下 JavaScript 代码：

<!-- index.html -->

<script>
  const form = document.getElementById('upload-form');
  const preview = document.getElementById('preview');

  form.addEventListener('submit', event => {
    event.preventDefault();

    const fileInput = document.querySelector('input[type="file"]');
    const file = fileInput.files[0];

    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('image', file);

    xhr.open('POST', '/upload');
    xhr.send(formData);

    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        const fileUrl = response.fileUrl;

        const img = document.createElement('img');
        img.setAttribute('src', fileUrl);
        preview.appendChild(img);
      }
    }
  });
</script>

这段代码会监听文件上传表单的submit事件，将选择的文件发送至服务器，然后接收服务器返回的文件 url 并在页面上显示预览图片。

4. 总结

通过上述两个步骤的代码实现，我们就可以在网页上实现本地上传图片并预览的功能了。

以上是一份简单的代码示例，读者也可以在这个基础上进行更多的改动和扩展，例如添加图片压缩功能等等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解nodejs实现本地上传图片并预览功能（express4.0+） - Python技术站