Node.js图片上传与预览实战：Multer与FileReader应用

"这篇文章主要展示了如何使用Node.js进行图片预览和上传的示例代码，涉及到前端的FileReader API和后端的Multer中间件。" 在开发Web应用时，图片预览和上传是常见的功能需求。Node.js作为后端开发的有力工具，结合前端技术可以实现这一功能。本文主要探讨了前端如何使用JavaScript的FileReader API进行本地图片预览，以及后端如何利用Node.js的Multer中间件处理图片上传。 前端图片预览通常在用户选择文件后进行，以便用户确认上传的图片是否符合预期。FileReader API是HTML5引入的一个重要特性，它允许我们异步读取本地文件。在这个过程中，`readAsDataURL`方法起着关键作用。当调用`readAsDataURL`时，它会读取指定的Blob或File对象的内容，并将其转换为一个data URL，这个URL包含了图片数据的base64编码，可以作为`<img>`标签的`src`属性值，从而在页面上显示图片。以下是一个简单的单个图片预览的JavaScript示例： ```html <input type="file" onchange="previewFile()"> <br> <img src="" height="200" alt="Image preview"> ``` ```javascript function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function() { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } } ``` 对于多张图片的预览，可以稍微修改代码，遍历所有选中的文件并为每个文件创建一个新的`FileReader`实例。这样，用户可以选择多个文件，页面会显示所有预览图。 在后端，Node.js通常使用Express框架处理HTTP请求。当用户提交图片上传请求时，可以借助Multer中间件来接收和处理文件。Multer可以解析multipart/form-data类型的表单数据，这是上传文件时常用的HTTP Content-Type。配置好Multer后，它会将上传的文件保存到指定目录，并在请求体中提供文件的相关信息。以下是一个简单的Multer配置示例： ```javascript const express = require('express'); const multer = require('multer'); const upload = multer({ dest: 'uploads/' }); const app = express(); app.post('/upload', upload.single('image'), (req, res) => { // req.file是包含上传文件信息的对象 console.log(req.file); // 处理上传后的逻辑... }); app.listen(3000, () => console.log('Server is running on port 3000')); ``` 在这个例子中，`upload.single('image')`指定了上传字段名为'image'的单个文件。如果需要上传多个文件，可以使用`upload.array()`或`upload.fields()`方法。 前端利用FileReader API实现图片预览，而后端使用Node.js和Multer中间件处理图片上传，共同构建了一个完整的图片上传系统。开发者可以根据具体需求对这些基础示例进行扩展和优化，例如添加图片大小验证、格式检查，或者将上传的图片发送到云存储服务等。