zoukankan      html  css  js  c++  java
  • 上传视频图片(包含调摄像机,相册)功能

    将这个包组件写的看鞥不能摄像头,不行就换成浏览器
    <!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>
  • 相关阅读:
    【Git】为GitHub添加ssh配置
    【Linux】cmake编译指定 gcc/g++
    【Git】提交历史查看
    【AFL(十五)】LAVA-M服务器篇
    Docker实用技巧(五):查看容器占用磁盘大小
    Docker实用技巧(四):限制cpu数量
    【AFL(十四)】afl-plot 使用详解
    【AFL(十三)】afl-whatsup 使用详解
    Docker实用技巧(三):容器与主机之间的端口映射
    【AFL(十二)】make文件管理
  • 原文地址:https://www.cnblogs.com/wd163/p/12560102.html
Copyright © 2011-2022 走看看