如何在 NodeJS 中保存和显示使用 Multer 包保存的图片？

Posted 2023-03-07

【中文标题】如何在 NodeJS 中保存和显示使用 Multer 包保存的图片？

【英文标题】：How to save and show the picture saved using Multer package in NodeJS?

【发布时间】：2018-12-31 04:24:54

【问题描述】：

我正在尝试使用multer 包保存图像文件。

这是我们的registration.js，其中包含注册表。以下脚本没有错误，但我们不知道如何访问 url 中的文件或向用户显示图像（具体如何以 MIME 格式保存）。

import React, Component from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

export default class Registration extends Component 
  constructor(props) 
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  

  handleSubmit(e) 
    e.preventDefault();
    var config = 
      headers: 
        'Content-Type': 'multipart/form-data'
      
    ;

    var formData = new FormData();
    var imagefile = document.getElementById('profilePicture');
    formData.append('name',document.getElementById('name').value);
    formData.append('email',document.getElementById('email').value);
    formData.append('telegramId',document.getElementById('telegramId').value);
    formData.append('password',document.getElementById('password').value);
    formData.append('image', imagefile.files[0]);
    console.log(formData);
    axios.post('/registration', formData,config).then(function(res)
      console.log(res.data+'res');
    ).catch(console.error);
  

  render() 
    return (<form className="registrationForm">
      <input type="text" name="name" id="name" required="required" placeholder="name" />
      <br/>
      <input type="email" id="email" required="required" placeholder="email"/>
      <br/>
      <input type="text" id="telegramId" required="required" placeholder="telegramID"/>
      <br/>
      <input type="password" id="password" required="required" placeholder="password"/>
      <br/>
      <input type="file" id="profilePicture"/>
      <br/>
      <button className="registerButton" onClick=this.handleSubmit>Register</button>
    </form>)
  ;

这是服务器端代码：

var multer  = require('multer')
var upload = multer( dest: '../assets/uploads/' )


app.post('/registration',upload.single('image'), (req, res) => 
  // console.log(req.body);
  console.log(req.file);
);

这就是控制台记录的内容！

 fieldname: 'image',
  originalname: 'sharif-logo-png-transparent.png',
  encoding: '7bit',
  mimetype: 'image/png',

  destination: 'uploads/',
  filename: 'e098a8370f444f321acd9aae668538fd',
  path: 'uploads\\e098a8370f444f321acd9aae668538fd',
  size: 271654

【参考方案1】：

multer 已经负责将文件保存到磁盘，因此您需要做的就是使该文件夹可访问，以便在<img> 标签中使用（或任何您想要用来显示它们的标签）。一个好的解决方案是express.static:

const  static  = require('express');
app.use('/images/', static('../assets/uploads/'));

然后你可以在你的客户端代码中使用它们：

<img src="/images/e098a8370f444f321acd9aae668538fd"></img>

您根本不必在 .post('/registration') 处理程序中处理文件。