Nodejs upload image

Nodejs upload image

node新手 最近在学node，做了一个上传图片的方法。 我在网络上查到的上传图片的方法多为 enter image description here

enter image description here

但是我的要求是从手机客户端获取图片并保存到制定的目录下，所以东拼西凑的完成如下代码 enter image description here

主要是获取到了图片的base64的字符串，然后保存到制定目录，虽然挺简单，但是自己也走了不少弯路，这样或那样的问题很多。现拿出来供大家打击！ 高手莫笑！


4 回复

Node.js 上传图片

背景

作为一个 Node.js 新手，我最近在学习如何实现从手机客户端上传图片的功能，并将其保存到指定的目录下。经过一番摸索，我找到了一种通过 Base64 编码字符串来处理图片上传的方法。尽管这种方法相对简单，但在实践中遇到了一些挑战。

示例代码

下面是一个简单的示例，展示了如何使用 Node.js 和 Express 处理图片上传。我们将通过 POST 请求接收一个 Base64 编码的图片字符串，并将其保存到服务器上的指定目录中。

首先，确保你已经安装了必要的依赖：

npm install express body-parser

接下来是主要的代码部分：

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

const app = express();
const uploadDir = './uploads/';

// 设置解析 JSON 和 URL-encoded 数据的中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 创建上传目录（如果不存在）
if (!fs.existsSync(uploadDir)){
    fs.mkdirSync(uploadDir);
}

// 定义上传图片的路由
app.post('/upload', (req, res) => {
    const base64Data = req.body.image.replace(/^data:image\/\w+;base64,/, "");
    const filePath = `${uploadDir}${Date.now()}.png`; // 使用当前时间作为文件名

    fs.writeFile(filePath, base64Data, 'base64', (err) => {
        if (err) {
            console.error(err);
            return res.status(500).send("Failed to save the file.");
        }
        res.status(200).send("File uploaded successfully!");
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 依赖安装：我们安装了 express 用于创建 HTTP 服务器，以及 body-parser 来解析请求体中的数据。
  2. 创建目录：如果上传目录不存在，则创建它。
  3. 处理上传：当接收到 POST 请求时，从请求体中提取 Base64 编码的图片数据，并将其写入指定路径的文件中。
  4. 启动服务器：监听端口 3000，等待客户端请求。

注意事项

  • 确保 Base64 字符串的有效性，避免因格式错误导致无法正确解码。
  • 在实际应用中，可能需要添加更复杂的错误处理和验证逻辑，例如检查文件类型、大小限制等。
  • 对于生产环境，建议使用专门的文件上传库，如 multer 或 busboy，以提供更强大的功能和更好的性能。

希望这个示例能帮助你理解如何在 Node.js 中实现图片上传功能。


为什么图片无法显示 悲催 敲代码吧

		request.addListener('data',function(postDataChunk){

			postData += postDataChunk;
			var base64 = JSON.parse(postData).imageBase64
			var base64Data = base64.replace(/^data:image\/png;base64,/,"");
			fs.writeFile("./tmp/out.png", base64Data, 'base64', function(err) {
				 console.log(err);
			});

不太懂需求

关于从手机客户端获取图片并将其保存到指定目录下的需求，我们可以使用Node.js来实现。这里提供一个简单的示例，使用Express框架来处理文件上传，并使用multer库来处理文件（包括Base64编码的图片）上传。

首先，确保你的项目中安装了必要的依赖包：

npm install express multer

接下来，创建一个基本的服务器设置，并处理文件上传：

示例代码

  1. 服务器端代码
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
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.post('/upload', upload.single('image'), (req, res) => {
    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. 客户端代码

对于从手机客户端发送Base64编码的图片，你可以通过POST请求将Base64字符串发送到服务器：

fetch('http://localhost:3000/upload', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        base64String: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...'
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

注意：上述示例中的Base64编码部分需要在实际应用中替换为真实的Base64编码字符串。同时，服务器端需要额外处理解析Base64字符串并将其写入文件的操作。

解释

  • 我们使用了multer中间件来处理文件上传。
  • 文件会被存储在uploads/目录下，使用时间戳作为文件名。
  • 客户端需要将Base64编码的图片发送到服务器，并在服务器端进行相应的解码和保存操作。

希望这可以帮助你解决图片上传的问题。

回到顶部