上传视频图片(包含调摄像机,相册)功能

将这个包组件写的看鞥不能摄像头,不行就换成浏览器
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传文件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        input.file 
        {
            position: relative;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        } 
        .wrapper{
            color: #fff;
            background-color: #31b0d5;
            border-color: #269abc;
            margin-top: 5px;
            margin-bottom: 5px;
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <h4>上传视频图片</h4>
        <div>
            <span type="primary" class="wrapper">
                <label class="btn" for="videoUpload">上传视频</label>
            </span>
            <span type="primary" class="wrapper">
                <label class="btn" for="imgUpload">上传图片</label>
            </span>
            <input type="file" accept="video/*" id="videoUpload" style="position:absolute; clip:rect(0 0 0 0);"  @change="uploadVideo($event)">
            <input type="file" accept="image/*" id="imgUpload" style="position:absolute; clip:rect(0 0 0 0);"  @change="uploadVideo($event)">
        </div>
    </div>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            uploadVideo(e) {
                //e.target.value文件名
                var file = e.target.files[0];
                var formdata = new FormData();
                formdata.append('fileStream', file);
                console.log('正在上传视频...')
                this.doUpload(formdata);
            },
            doUpload(formdata) {
                axios.post('/teacher/doUpload', formdata).then(res => {
                    if (res.data.success) {
                        console.log('上传成功');
                    } else {
                        console.log('上传失败');
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    });
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/wd163/p/12560102.html