要求する
- h5録画ビデオ、
- ノードサーバーへの非同期アップロード
- ファイルはサーバー側に保存されます。
テクノロジーの選択
フロントエンド
- jquery
後部
- また
テクニカルピット
h5録画ビデオ
<input type="file" name="file" accept="video/*" id="takeVideo" capture="camcorder"/>
それは主にaccept財産とcapture財産に依存しています
受け入れる（使用可能なファイルタイプを制限する）
accept属性：システムファイルディレクトリを直接開くことができます。要素のtype属性の値がfileの場合、この属性はサーバー側で受け入れ可能なファイルタイプを示し、他のファイルタイプは無視されます。
ユーザーが指定されたタイプのファイルをアップロードするようにしたい場合は、inputのaccept属性を使用できます。
需要と組み合わせてアップロードされたビデオ録画なのでaccept="video/*"、需要を満たすように設定します。
展開
audio / *は、すべてのオーディオファイルを意味しますHTML5（サポートされています）
video / *はビデオファイルHTML5（サポートされている）を意味します
image / *は画像ファイルHTML5を意味します（サポートされています）
キャプチャ（デバイスメディアの呼び出し）
キャプチャ属性：webappの入力のファイル属性を使用し、キャプチャ属性を指定して、システムのデフォルトのカメラ、ビデオ、および記録機能を呼び出します。
展開
Capture = "camera"カメラ
Capture = "camcorder"カメラ
キャプチャ= "マイク"録音
非同期アップロード
主に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';
}
}
);
デモ
github：https：//github.com/bosscheng/koa-h5-video-async-upload