Nodejs Express4之后上传图片出问题了

Nodejs Express4之后上传图片出问题了

我学zemirco的express-upload-progress实现图片上传：https://github.com/zemirco/express-upload-progress 他的代码用的是Express3，我使用的是4.10.7，可以实现图片上传并且过一段时间自动删除，但是每次点提交之后页面都会变成一片空白，没有任何代码的一片空白。 请各位帮忙看下是哪里出了问题，谢谢！ 这是我的代码：https://github.com/irini/express4-upload-progress


7 回复

你每次都

res.end()

应该send 一些东西才会显示吧


把res.end()换成res.end('ok) 放到 unlink 打callback中试试

[@dayuoba](/user/dayuoba) 改了之后图片还是可以上传，页面是一直loading的状态，终端显示如下： GET / 200 322.996 ms - 1088 GET / 200

[@edward32tnt](/user/edward32tnt) 主要还是前端js的问题，修改之后现在已经可以正常使用了~

[@dayuoba](/user/dayuoba) 问题主要出在前端的js上，现在已经修改好了。谢谢！

当然可以。根据你的描述，你正在尝试将一个基于Express 3的图片上传示例迁移到Express 4，并且遇到了一些问题。以下是一些可能的原因和解决方案：

可能的原因

  1. 中间件的变化：从Express 3到Express 4，中间件的使用方式有所变化。
  2. 路由定义的变化：Express 4对路由定义有一些调整。
  3. 依赖库的更新：multer（一个常见的文件上传中间件）在Express 4中需要正确配置。

解决方案

示例代码

首先，确保你已经安装了必要的依赖项，如multer和express：

npm install express multer

接下来，我们来修改你的代码以适应Express 4。

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

const app = express();
const upload = multer({ dest: 'uploads/' });

app.use(express.static(path.join(__dirname, 'public')));

// 设置上传中间件
app.post('/upload', upload.single('image'), (req, res) => {
    // req.file 是单个文件的信息
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    // 你可以在这里添加删除文件的逻辑
    res.send('File uploaded successfully.');
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

解释

  1. Multer 配置：

    • multer({ dest: 'uploads/' }) 将上传的文件保存到 uploads/ 目录下。

  2. 路由定义：

    • app.post('/upload', upload.single('image'), ...) 定义了一个POST路由 /upload，用于处理单个文件的上传。
    • upload.single('image') 表示接受一个名为 image 的文件。

  3. 响应处理：

    • 如果没有文件上传，返回400状态码和错误信息。
    • 如果文件上传成功，返回成功信息。

其他建议

  • 确保前端表单的 enctype 属性设置为 multipart/form-data。
  • 检查前端是否正确发送了文件请求。

希望这些示例代码和解释能够帮助你解决问题。如果你还有其他问题或需要进一步的帮助，请随时告诉我。

根据你的描述，你尝试使用 zemirco/express-upload-progress 示例代码，并将其迁移到 Express 4.x 版本中。然而，在点击提交按钮后页面变成了空白页。这可能是由于某些不兼容的更改或错误导致的。

可能的原因

  1. 中间件顺序：在 Express 4 中，中间件的顺序非常重要。你需要确保加载 body-parser 或其他解析请求体的中间件，以及文件处理中间件（如 multer）的位置正确。

  2. 错误处理：Express 4 更加严格地处理错误。如果某个中间件抛出错误但没有被适当地处理，应用程序将停止响应。

示例解决方案

这里提供一个简单的示例来帮助你开始，使用 multer 来处理文件上传，它是一个流行的文件上传中间件。

安装依赖

npm install express multer body-parser

示例代码

const express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser');

const app = express();

// 设置multer存储配置
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now());
    }
});

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

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 文件上传路由
app.post('/upload', upload.single('image'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    res.send('File uploaded successfully.');
});

// 错误处理中间件
app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send('Something broke!');
});

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

解释

  • 使用 multer 进行文件上传，并将其存储在 uploads/ 目录中。
  • 在中间件列表中，确保首先加载 bodyParser 来解析 POST 数据。
  • 提供错误处理中间件来捕获并处理任何未处理的异常。
  • 确保路由正确处理上传的文件，并返回适当的响应。

通过这种方式，你可以更好地理解问题所在，并且解决上传过程中的空白页面问题。希望这对您有所帮助！

回到顶部