Node.js 实现图片上传与预览（Express 4.0+）

"本文将详细介绍如何使用Node.js的Express 4.0+框架配合multiparty模块来实现本地图片上传并预览的功能。在处理图片上传过程中，由于浏览器安全限制，本地上传图片会得到一个`C:\fakepath\`格式的路径，这并不实际，因此我们需要将图片上传至服务器，然后返回服务器上的图片路径以供预览。前端利用Ajax和FormData对象进行异步文件上传，后端使用multiparty解析表单数据。" 在实现这一功能的过程中，我们首先需要安装相关的依赖库。Express是Node.js中的一个流行web应用框架，而multiparty则是一个用于处理HTTP多部分表单数据的模块。确保已安装这两个库，可以通过npm进行安装： ```bash npm install express --save npm install multiparty --save ``` 前端HTML部分，创建一个包含文件输入字段的表单，以及用于预览图片的`img`元素： ```html <form name='picForm' action="javascript:;" method="post" enctype="multipart/form-data"> <input type="file" id="test" id="j_imgfile"> </form> <div> <img src="" id="j_imgPic"> </div> ``` 当用户选择图片后，JavaScript监听`change`事件，使用Ajax提交表单数据。这里使用jQuery简化操作： ```javascript $('#j_imgfile').on('change', function() { // 检查文件类型 var objFile = $('#j_imgfile').val(); var objType = objFile.substring(objFile.lastIndexOf(".")).toLowerCase(); if (!(objType == '.jpg' || objType == '.png')) { alert("请上传jpg、png类型图片"); return false; } // 创建FormData对象并添加表单数据 var formData = new FormData(document.forms.namedItem("picForm")); // 使用Ajax发送POST请求 $.ajax({ type: 'post', url: '/uploadUserImgPre', data: formData, processData: false, contentType: false, cache: false, // 其他配置项... }); }); ``` 在Node.js的Express服务器端，我们需引入multiparty模块并编写处理图片上传的路由： ```javascript const express = require('express'); const multiparty = require('multiparty'); const app = express(); app.use(express.static('public')); // 假设静态文件目录为public app.post('/uploadUserImgPre', (req, res) => { const form = new multiparty.Form(); form.parse(req, (err, fields, files) => { if (err) { res.status(500).send('上传失败'); return; } const file = files['j_imgfile'][0]; // 假设文件域名为'j_imgfile' const filePath = file.path; // 获取文件在服务器上的临时路径 const ext = path.extname(file.originalFilename); // 获取文件扩展名 // 将文件移动到你希望保存的目录，例如public/images/ const targetPath = `public/images/${Date.now()}${ext}`; fs.rename(filePath, targetPath, (renameErr) => { if (renameErr) { res.status(500).send('保存文件失败'); return; } // 返回图片路径供前端预览 res.json({ imagePath: `/images/${Date.now()}${ext}` }); }); }); }); app.listen(3000, () => console.log('Server is running on port 3000')); ``` 以上代码展示了如何在Express服务器上接收并处理上传的图片文件，将其移动到指定目录，并返回新路径给前端。前端收到响应后，可以将图片路径设置到`img`元素的`src`属性，从而实现图片预览。 总结来说，要实现在Node.js Express应用中上传本地图片并预览，关键步骤包括：前端使用Ajax和FormData发送文件，后端使用multiparty解析文件数据，处理文件上传，最后返回文件路径给前端进行预览。这个过程需要处理浏览器的安全限制，以及文件的存储和路径管理。