Nodejs 关于express 4.2.0 上传图片

Nodejs 关于express 4.2.0 上传图片

<form method=“post” enctype=“multipart/form-data” action="/set_avatar">
<input type=“file”, name=“avatar”>
<input type=“submit” value=“Upload”>
</form>

服务端

var form = new multiparty.Form();
var avatar;

form.on('error', next);
form.on('close', function () {
	res.send('xxx');
});

form.on('field', function(name, val){
    if (name !== 'title') return;
    title = val;
  });

console.log('1');
form.on('part', function (part) {

	console.log('2');
	if (!part.filename) return ;
	if (part.name != 'avatar') return part.resume();
	avatar = {};
	avatar.filename = part.filename;
	avatar.size = 0;
	part.on('data', function(buf){
		avatar.size += buf.length;
	});
});

form.parse(req);

得不到预想的图片，而且我把req console.log出来并没有看到任何文件的信息，要怎么去看？难道是没上传上来？

console.log出来的headers信息是这样 headers: { host: ‘xxx’, connection: ‘keep-alive’, ‘content-length’: ‘7811’, ‘cache-control’: ‘max-age=0’, accept: ‘text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8’, origin: ‘http://xxx’, ‘user-agent’: ‘Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36’, ‘content-type’: ‘multipart/form-data; boundary=----WebKitFormBoundaryhzU9qAyW14ryNaOf’, referer: ‘http://xxx’, ‘accept-encoding’: ‘gzip,deflate,sdch’, ‘accept-language’: ‘en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4’, cookie: ‘connect.sid=s%3Am5iDWblBrlruE2ucuQds3I3UOsi-LSTq.hDncxPBALz96McBvQQkCtXYG9NR47%2FW%2BnwZ%2BfbXdo%2Fw’ }


4 回复

在处理文件上传时，尤其是在使用Express框架时，直接使用multiparty.Form()可能会导致一些问题。更推荐的方式是使用专门处理文件上传的中间件，如multer。

示例代码

首先，安装必要的依赖：

npm install express multer

然后，在你的Express应用中配置并使用multer来处理文件上传：

客户端HTML表单

<form method="post" enctype="multipart/form-data" action="/upload">
    <input type="file" name="avatar">
    <input type="submit" value="Upload">
</form>

服务器端代码

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

const app = express();

// 配置Multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 存储路径
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname); // 文件名
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('avatar'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    res.send(`File uploaded successfully! Filename: ${req.file.filename}`);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 客户端HTML表单：

    • enctype="multipart/form-data" 是必需的，因为它告诉浏览器在发送数据时应使用多部分编码格式。
    • <input type="file" name="avatar"> 允许用户选择文件。

  2. 服务器端代码：

    • 使用multer来处理文件上传。multer会解析请求中的文件，并将其存储在指定位置。
    • storage配置了文件的存储路径和文件名。
    • upload.single('avatar') 中的avatar是表单中name属性的值。
    • 在路由处理器中，检查是否有文件被上传。如果有，则返回成功消息；如果没有，则返回错误。

通过这种方式，你可以更方便地处理文件上传，并且避免了直接使用multiparty.Form()时可能遇到的问题。


楼主还是先熟悉掌握下HTTP协议吧 ，有助于楼主更好的解决问题 ：)

req哪里来的- -

根据你提供的信息，你在处理文件上传时遇到了一些问题。这里有一个完整的示例，展示如何使用 express 和 multer 来处理文件上传。

安装依赖

首先，你需要安装 express 和 multer：

npm install express multer

服务器端代码

接下来，这是你的服务器端代码：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

// 配置 multer 存储
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 设置文件保存路径
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname)) // 使用时间戳作为文件名
  }
});

const upload = multer({ storage: storage });

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.post('/set_avatar', upload.single('avatar'), (req, res, next) => {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send(`File uploaded successfully! File name: ${req.file.filename}`);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

HTML 表单

这是你的 HTML 表单代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Image</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="/set_avatar">
    <input type="file" name="avatar">
    <input type="submit" value="Upload">
</form>
</body>
</html>

说明

  1. Multer 是一个中间件，用于处理 multipart/form-data，主要用于上传文件。
  2. multer.diskStorage() 用于配置文件存储的位置和文件名。
  3. upload.single('avatar') 中的 'avatar' 应该与表单中的 <input> 的 name 属性相匹配。
  4. 在表单提交后，文件将被保存到 uploads/ 目录下，并返回成功消息。

通过这种方式，你可以确保文件正确上传并保存到指定目录。

回到顶部