1.随便找一个空的文件夹,执行命令,有提示之后一路回车:
npm init2.安装express:
npm install express --save3.在建好的项目下建一个server.js,在server.js写上一下代码:
var express = require('express');
var app = express();
// var bodyParser = require('body-parser');
// 创建 application/x-www-form-urlencoded 编码解析
// var urlencodedParser = bodyParser.urlencoded({ extended: false })
//设置跨域访问,这一段好像没用
// app.all('*', function(req, res, next) {
// res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Headers", "X-Requested-With");
// res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
// res.header("X-Powered-By",' 3.2.1')
// res.header("Content-Type", "application/json;charset=utf-8");
// next();
// });
// 解决跨域
var cors = require('cors');
app.use(cors());
// app.use(express.static('public'));
// app.get('/index.html', function (req, res) {
// res.sendFile( __dirname + "/" + "index.html" );
// })
// let i=0
app.post('/uploadfile', function (req, res) {
console.log("--------------------------------------------------------------------------------------------------------------------------------------")
console.log(req)
// 输出 JSON 格式
// res.end(JSON.stringify(req));
})
var server = app.listen(8088, function () {
// var host = server.address().address
// var port = server.address().port
// console.log(host);
// console.log(port)
console.log("应用实例，访问地址为 http://127.0.0.1:8088")
})4.在你新建的这个文件夹下,最好去官网下载好nodejs,比较好用的就是nodemon,nodemon会热更新,执行以下命令启动服务器:
node server.js5.随便找一个文件夹新建一个index.html文件,写上以下代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" id="fileinput" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(() => {
// Options here
const chunkSize = 1024 * 1024 * 50; // 50MB
const url = 'http://localhost:8088/uploadfile';
const crazyMode = false;
$('#fileinput').change((e) => {
const file = e.target.files[0];
console.log(file);
if (file) {
const filename = Math.random() + '.apk';
const blobArr = [];
const chunkNum = Math.ceil(file.size / chunkSize);
console.log('before slice', Date.now());
// Slice file
for (let i = 0; i < chunkNum; i++) {
const start = i * chunkSize;
const end = start + chunkSize;
// https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice
blobArr.push(file.slice(start, end));
}
console.log('after slice', blobArr, Date.now());
if (crazyMode) {
// Post all in same time
const promiseArr = blobArr.map((blob, i) => {
const data = new FormData();
data.append('name', filename);
data.append('chunk', i);
data.append('chunks', blobArr.length);
data.append('Filename', file.name);
data.append('size', file.size);
data.append('file', blob);
return fetch(url, {
method: 'POST',
cache: 'no-cache',
headers: {
'Content-Length': blob.size,
},
body: data,
});
});
Promise.all(promiseArr).then((results) => {
// call the server to concat chunks
return fetch(url, {
method: 'POST',
cache: 'no-cache',
headers: {
'content-type': 'application/json',
},
body: {
filename: filename,
finished: 1,
},
});
}).then(() => {
console.log('finished', Date.now());
}).catch(e => console.log(e));
} else {
// Post all one by one
(async () => {
for (let i = 0; i < blobArr.length; i++) {
const blob = blobArr[i];
const data = new FormData();
data.append('name', filename);
data.append('chunk', i);
data.append('chunks', blobArr.length);
data.append('Filename', file.name);
data.append('size', file.size);
data.append('file', blob);
try {
console.log('before fetch data', i, Date.now());
await fetch(url, {
method: 'POST',
cache: 'no-cache',
headers: {
'Content-Length': blob.size,
},
body: data,
});
console.log('after fetch data', i, Date.now());
} catch (e) {
console.log(e);
}
}
})();
console.log('finished', Date.now());
}
}
});
});
</script>
</body>
</html>