<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>upload</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<button id="upload">上传</button>
<script type="text/javascript">
var bytesPerPiece = 1024 * 1024;
var totalPieces;
$("#upload").click(upload)
function upload() {
var blob = document.getElementById("file").files[0];
var uuidfolder = uuid(8, 16);
var start = 0;
var end;
var index = 0;
var count = 0;
var filesize = blob.size;
var filename = blob.name;
totalPieces = Math.ceil(filesize / bytesPerPiece);
while (start < filesize) {
end = start + bytesPerPiece;
if (end > filesize) {
end = filesize;
}
var chunk = blob.slice(start, end);
console.log(chunk)
var sliceIndex = blob.name + index;
var formData = new FormData();
formData.append("file", chunk, sliceIndex);
formData.append("uuidfolder", uuidfolder);
formData.append("imgorder", index);
$.ajax({
url: '/upload3',
type: 'POST',
data: formData,
processData: false,
contentType: false,
}).done(function (res) {
count++;
if (count == totalPieces) {
console.log("上传结束,请求拼接接口,将切片信息拼接完整,返回图片url");
$.post('/merge', { id: uuidfolder }, function (data) {
console.log(data);
})
}
}).fail(function (res) {
console.log("上传失败")
});
start = end;
index++;
}
}
function uuid(len, radix) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [], i;
radix = radix || chars.length;
if (len) {
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
} else {
var r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
}
</script>
</body>
</html>
node
router.post('/imgurl', upload.single('img'), function (req, res, next) {
console.log(req.file)
console.log(req.body)
let imgOld = req.file.destination + "/" + req.file.filename
let imgNew = req.file.destination + "/" + req.body.name + '.' + 'blob-' + req.body.index;
fs.rename(imgOld, imgNew, (err) => {
if (err) {
res.json({
success: false,
data: '上传失败'
})
} else {
res.json({
success: true,
data: imgNew
})
}
})
});
router.post('/file', async (ctx, next) => {
const chunksPath = path.join('uploads', '/');
const filePath = path.join('uploads', 'cs.bin');
fs.writeFileSync(filePath, '');
for (let i = 0; i < 58; i++) {
fs.appendFileSync(filePath, fs.readFileSync(chunksPath + 'cs.blob' + '-' + i));
fs.unlinkSync(chunksPath + 'cs.blob' + '-' + i);
}
ctx.res.end('合并成功');
console.log(chunksPath)
console.log(filePath)
})