学习了一下客户端和服务器利用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();
}
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)