基于koa的h5视频录制异步上传
需求
- h5 录制视频,
- 异步上传到 node 服务器端
- 文件保存在服务器端。
技术选型
前端
- jquery
后端
- koa
技术坑点
h5 录制视频
<input type="file" name="file" accept="video/*" id="takeVideo" capture="camcorder"/>
主要依赖 accept 属性 和 capture 属性
accept(限制可用文件类型)
accept 属性:可以直接打开系统文件目录。当元素的 type 属性的值是 file,该属性表明服务器端可接受的文件类型,其它文件类型会将被忽略。
如果希望用户上传指定、类型的文件, 可以使用 input 的 accept 属性。
结合需求是上传视频录制,所以设置 accept="video/*" 就可以满足需求了。
扩展
audio/* 表示所有音频文件 HTML5(支持)
video/* 表示视频文件 HTML5(支持)
image/* 表示图片文件 HTML5(支持)
capture(调用设备媒体)
capture 属性:在webapp上使用 input 的 file 属性,指定 capture 属性可以调用系统默认相机、摄像和录音功能。
扩展
capture="camera" 相机
capture="camcorder" 摄像机
capture="microphone" 录音
异步上传
主要利用 FormData 和 ajax 来实现文件的异步上传。
核心代码:
$input.on('change', function (event) {
const files = event.target.files;
if (files && files.length > 0) {
let file = files[0];
if (file.size > 100 * 1024 * 1024) {
alert('视频大于100M,请重新上传');
return;
}
// $form.submit();
let formData = new FormData();
formData.append('file', file);
$uploading.show();
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
cache: false,
processData: false,
contentType: false
}).then(function (data) {
console.log(data);
// success
}).catch(function (e) {
console.error(e);
// error
});
} else {
alert('请重新上传视频');
}
})
文件保存在服务器端
主要依赖 koa-body 库来帮助我们读取上传的文件
具体实现:
const koaBody = require('koa-body')({
multipart: true,
formLimit: 2000 * 1024 * 1024,
formidable: {
uploadDir: __dirname + '/temps'
}
});
<!-- router -->
router.post('/upload', koaBody,
(ctx) => {
const file = ctx.request.files && ctx.request.files.file;
if (file) {
const reader = fs.createReadStream(file.path);
const ext = file.name.split('.').pop();
const dir = path.join(__dirname, `/uploads/${(new Date()).getTime()}.${ext}`);
const upStream = fs.createWriteStream(dir);
reader.pipe(upStream);
return ctx.body = 'success';
} else {
return ctx.body = 'error';
}
}
);
demo
github: https://github.com/bosscheng/koa-h5-video-async-upload