node后台图片上传

最新推荐文章于 2024-05-28 09:25:21 发布

chuijian2218

最新推荐文章于 2024-05-28 09:25:21 发布

阅读量203

点赞数

文章标签： java json

原文链接：https://my.oschina.net/u/4075942/blog/3051045

版权

前台ajax上传，图片转base64

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
</head>

<body>
<input type="file" multiple name="file" id="file" class="file">
<div id="preview"></div>
<script>
    var fileBox = document.getElementById("file");
    fileBox.onchange = function () {
        var uploadData = {};
        var file = fileBox.files[0];
        //预览
        // handleFiles(files);
        //上传
        uploadData.filetype = file.type;//文件类型
        uploadData.fileName = file.name;//文件名
        uploadData.fileSize = file.size; //文件大小

        const reader = new FileReader();
        reader.onload = function (e) {
            uploadData.file = e.target.result; //文件对象
            //console.log(e.target.result);
            loadXMLDoc(uploadData);
        };
        reader.readAsDataURL(file);
    };


    function loadXMLDoc(fileList) {
        var reqData = JSON.stringify(fileList);
        var xmlhttp;
        if (window.XMLHttpRequest) {
            /*  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码*/
            xmlhttp = new XMLHttpRequest();
        }
        else {
            /* IE6, IE5 浏览器执行代码*/
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            console.log(xmlhttp);
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.responseText);

            }
        };
        //console.log(fileList);
        xmlhttp.open("post", "http://localhost:9999/upload");
        xmlhttp.send(reqData);
    }
    function handleFiles(files) {
        var preview = document.getElementById("preview");
        console.log(files);
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            console.log(file);
            if (!file.type.startsWith('image/')) { continue }

            const img = document.createElement("img");
            img.classList.add("obj");
            img.file = file;
            console.log(preview);
            preview.appendChild(img); 

            const reader = new FileReader();
            reader.onload = (function (aImg) {
                //console.log(aImg);
                return function (e) { aImg.src = e.target.result; };
            })(img);
            reader.readAsDataURL(file);
        }
    }
</script>
</body>

</html>

node后台

var http = require('http');
var fs = require('fs');
var host = 'localhost';
var port = 9999;

http.createServer($ajax).listen(port, host, function () {
    console.log('server on start at http://' + host + ":" + port);
});

function $ajax(request, response) {
    response.setHeader("Access-Control-Allow-Origin", "*");
    var postData = [];
    var len=0;
    
   if (request.url === '/upload' && request.method.toLowerCase() === 'post') {

        //接收数据
        request.on('data', function (chunk) {
            //console.log(Buffer.isBuffer(chunk));
            len += chunk.length;
            postData.push(chunk);
        });
//成功，处理数据，返回
        request.on('end', function () {
            //img64
           
            //将字符串转换位一个对象
            console.log('success');
            let postArrObj = Buffer.concat(postData, len).toString();

            //转换base64
            let postObj = JSON.parse(postArrObj);
            //console.log(postObj);
           const  base64DataStr = postObj.file; //文件对象
            //const filetype=  postObj.filetype;//文件类型
            const fileName= postObj.fileName;//文件名
            //const fileSize= postObj.fileSize; //文件大小

            //过滤
            let base64Data = base64DataStr.replace(/^data:image\/\w+;base64,/, '');
            //转换Buffer
            let dataBuffer = Buffer.from(base64Data, 'base64');
            fs.writeFile(fileName, dataBuffer, function (err) {
                if (err) {
                    response.end(err);
                } else {
                    console.log('图片保存成功');
                    response.end("保存成功！");
                }
            });

        });
   }
}

little tips：

1，跨域设置

response.setHeader("Access-Control-Allow-Origin", "*");

2，上传的图片过大，已验证6M，图片过大,data会多次执行，用postData接收返回的buffer值 chunk，并记录其长度len，在end中使用Buffer.concat(postData, len)创建新的buffer，然后转换base64

var postData = [];
var len=0;

//接收数据
request.on('data', function (chunk) {
    //console.log(Buffer.isBuffer(chunk));
    len += chunk.length;
    postData.push(chunk);
});

//成功，处理数据，返回
        request.on('end', function () {
            //将字符串转换位一个对象
            let postArrObj = Buffer.concat(postData, len).toString();
            //转换base64
            let postObj = JSON.parse(postArrObj);

3，保存图片，'img/'+fileName表示将图片fileName保存在img下。

fs.writeFile('img/'+fileName, dataBuffer, function (err) {
    if (err) {
        response.end(err);
    } else {
        console.log('图片保存成功');
        response.end("保存成功！");
    }
});

转载于:https://my.oschina.net/u/4075942/blog/3051045

chuijian2218

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node后台图片上传

前台ajax上传，图片转base64 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...
复制链接

扫一扫