學習了一下用戶端和伺服器利用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=)