简单记录上传blob和base64保存图片

最新推荐文章于 2024-04-26 16:37:52 发布

cc_bbs

最新推荐文章于 2024-04-26 16:37:52 发布

阅读量251

点赞数

分类专栏： js成长日记文章标签： js nodejs base64 blob

本文链接：https://blog.youkuaiyun.com/q314235965/article/details/118697952

版权

js成长日记专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何使用AJAX配合Node.js处理客户端上传图片，包括使用Blob和Base64格式，详细展示了前端文件选择、发送Blob到服务器以及后端接收处理Base64编码的图片步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习了一下客户端和服务器利用ajax上传图片的技术。利用了ajax的post方法和nodejs的http、fs模块

没有用formdata。直接上传blob和base64.

上传和接收blob

客户端代码：直接上传blob数据


<body>
    <input type="file">
    <input type="button" value="click" onclick="upload()">
</body>
<script>
    const fileInput = document.querySelector('[type=file]');
    const btn = document.querySelector('[type=button]');

    function upload() {
        send(fileInput.files[0])
    }

    function send(data) {
        const xhr = new XMLHttpRequest();
        xhr.open('post', 'http://localhost:2333');
        xhr.onload = function () {
            console.log('finish:' + Date.now());
        }
        xhr.send(data);
    }
</script>

服务端代码：接收post数据

关键知识：req.on('data')事件，接收到的data是object。是arraybuffer。所以结束后要用Buffer的concat函数进行整合。

const http = require('http');
const fs = require('fs');
http.createServer((req, res) => {
    if (req.method.toLocaleLowerCase() === 'post') {
        res.setHeader('access-control-allow-origin', '*');
        let _result = [];
        req.on('data', data => {
            _result.push(data)
        });
        req.on('end', () => {
            const _fileBuffer = Buffer.concat(_result);
            fs.writeFile('picname.png', _fileBuffer, err => console.log(err, Date.now()));
        })
        res.end();
    }
    if (req.method.toLocaleLowerCase() === 'options') {
        res.setHeader('access-control-allow-origin', '*');
        res.setHeader('access-control-allow-headers', 'content-type');
        res.end();
    }
    res.end();
}).listen(2333, 'localhost', () => console.log('start'));

上传和接收base64

客户端需要改upload函数代码

关键点是：

filereader的readAsDataURL函数成功后，fs.result为base64

该base64有前缀信息，需要去掉。

function upload() {
        const fr = new FileReader();
        fr.readAsDataURL(fileInput.files[0]);
        fr.onloadend = function () {
            send(fr.result.slice(fr.result.indexOf(',') + 1));
        }
}

服务端需要改post判断里的代码：

if (req.method.toLocaleLowerCase() === 'post') {
        res.setHeader('access-control-allow-origin', '*');
        let _result = '';
        req.on('data', data => _result += data);
        req.on('end', () => {
            const _fileBuffer = Buffer.from(_result, 'base64');
            fs.writeFile('picname.png', _fileBuffer, err => console.log(err, Date.now()));
        })
        res.end();
}