node+express 使用 multer 上传的图片怎么让前端显示？
2023-11-17 阅读 40
在使用Node.js和Express.js的情况下，你可以使用Multer中间件来处理文件上传。一旦文件上传成功，你可以将文件保存在服务器的特定目录中，并将文件名或路径保存到数据库中。
要在前端显示上传的图片，你可以通过以下步骤进行操作：
1. 在Express的路由处理程序中，将上传的图片保存在服务器的指定目录中。你可以使用`fs`模块来处理文件操作。确保你的服务器有权限写入文件。
```javascript
const fs = require('fs');
// ...
app.post('/upload', upload.single('image'), (req, res) => {
// 保存上传的图片
const imagePath = 'path/to/save/image/' + req.file.filename;
fs.writeFileSync(imagePath, req.file.buffer);
// 将图片路径保存到数据库中
// ...
res.send('Upload successful');
});
```
2. 在前端，你可以使用`
![]()
`标签来显示上传的图片。将图片的URL设置为服务器上保存的图片路径。
```html
```
注意，`/path/to/save/image/filename.jpg`应该替换为实际的图片路径。
3. 当用户访问包含上传图片的页面时，服务器将根据请求返回相应的HTML页面，并在其中包含上传图片的`
![]()
`标签。
这样，当用户访问包含上传图片的页面时，页面将显示上传的图片。
请注意，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。另外，确保在生产环境中使用合适的安全措施来处理文件上传，例如限制文件类型、大小和路径等。
更新于 2023年11月17日
