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


    将这个包组件写的看鞥不能摄像头,不行就换成浏览器
    <!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>
  • 相关阅读:
    第八周读书笔记 ——编程之美
    结对编程收获——旧的不去&新的不来
    第七周读书笔记——深入理解计算机系统
    第六周读书笔记——《编程珠玑(第二版)》
    专业性体育平台——虎扑的发展与创新的思考(第五次课后作业)
    第五次读书笔记—— Robrt C. Martin的《代码整洁之道》
    个人博客-ASE课程最后一周总结
    期中作业,阅读材料感想
    Poemscape beta版本第二阶段目标描述
    Poemscape|Beta阶段第二天
  • 原文地址:https://www.cnblogs.com/wd163/p/12560102.html
Copyright © 2020-2023  润新知