需求

1. h5 录制视频，
2. 异步上传到 node 服务器端
3. 文件保存在服务器端。

技术选型

前端

• 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