webupload上传视屏到服务器，ffmpeg分片到阿里oss,前段播放分片之001

最新推荐文章于 2023-12-11 13:51:16 发布

搁浅伟岸

最新推荐文章于 2023-12-11 13:51:16 发布

阅读量413

点赞数 1

分类专栏：文件上传文章标签： webuploader 百度分片上传进度条 html js

本文链接：https://blog.csdn.net/weixin_43142305/article/details/93240751

版权

文件上传专栏收录该内容

0 篇文章 0 订阅

订阅专栏

问题

在使用微博发布一个视屏时，发现微博只能在关注的首页发表，而刷新了一下之后，你上传的视屏就会消失，短时间内是搜索不到的。

自己的结论

上传完文件后，发送消息到mq,通知服务器有文件需要操作，微博服务端通过ffmpeg 分片整个视屏（我当时认为这个过程是他耗时间的重要原因，，不过确实是，但是复杂的多）

百度后的结果

大家可去去看看
https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/80823515

于是准备按照自己的思路做一个迷你版的这个功能！

前段第一步

  
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="uploadfile">
    <div id="picker" >立刻拍     </div>



    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list">
        <table class="table" border="1" cellpadding="0" cellspacing="0" width="100%">
            <tr class="filelist-head">
                <th width="5%" class="file-num">序号</th>
                <th class="file-name">视频名称</th>
                <th class="file-size">大小</th>
                <th width="20%" class="file-pro">进度</th>
                <th class="file-status">状态</th>
                <th width="20%" class="file-manage">操作</th>
            </tr>
        </table>
    </div>
    <div id="ctlBtn" class="btn btn-default" >
        <button type="button" class="btn">开始上传</button>
    </div>

</br>


    <div id="vvv">
        <input type="file" name="选择文件" accept="image/*" multiple >
    </div>

</div>
<!--引入JS-->
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../js/webuploader.js"></script>
<script>
    $(function(){
        //视频上传 start
        var $list = $('#thelist .table'),
            $btn = $('#ctlBtn');

        var uploader = WebUploader.create({
            resize: false, // 不压缩image
            // 加载swf文件
            swf: '../lib/Uploader.swf',

            // 接收文件的服务端地址。
            server: 'http://ip:port/项目名/方法',   

            pick: '#picker', // 选择文件的按钮。可选
            chunked: true, //是否要分片处理大文件上传
            chunkSize:2*1024*1024, //分片上传，每片2M，默认是5M
            // auto: true, //选择文件后是否自动上传
            // chunkRetry : 2, //如果某个分片由于网络问题出错，允许自动重传次数
            //runtimeOrder: 'html5,flash',
            // accept: {
            //   title: 'Images',
            //   extensions: 'gif,jpg,jpeg,bmp,png',
            //   mimeTypes: 'image/*'
            // }
            duplicate: false //是否支持重复上传
        });
        // 当有文件被添加进队列的时候
        uploader.on( 'fileQueued', function( file ) {

            $list.append('<tr id="'+ file.id +'" class="file-item">'+'<td width="5%" class="file-num">111</td>'+'<td class="file-name">'+ file.name +'</td>'+ '<td width="20%" class="file-size">'+ (file.size/1024/1024).toFixed(1)+'M' +'</td>' +'<td width="20%" class="file-pro">0%</td>'+'<td class="file-status">等待上传</td>'+'<td width="20%" class="file-manage"><a class="stop-btn" href="javascript:;">暂停</a><a class="remove-this" href="javascript:;">取消</a></td>'+'</tr>');

            //暂停上传的文件
            $list.on('click','.stop-btn',function(){
                uploader.stop(true);
            })
            //删除上传的文件
            $list.on('click','.remove-this',function(){
                if ($(this).parents(".file-item").attr('id') == file.id) {
                    uploader.removeFile(file);
                    $(this).parents(".file-item").remove();
                }
            })
        });




        //重复添加文件
        var timer1;
        uploader.onError = function(code){
            clearTimeout(timer1);
            timer1 = setTimeout(function(){
                layer.msg('该文件已存在');
            },250);
        }

        // 文件上传过程中创建进度条实时显示
        uploader.on( 'uploadProgress', function( file, percentage ) {
            $("td.file-pro").text("");
            var $li = $( '#'+file.id ).find('.file-pro'),
                $percent = $li.find('.file-progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="file-progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>' + '<br/><div class="per">0%</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.siblings('.file-status').text('上传中');
            $li.find('.per').text((percentage * 100).toFixed(2) + '%');

            $percent.css( 'width', percentage * 100 + '%' );
        });
        // 文件上传成功
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).find('.file-status').text('已上传');
        });

        // 文件上传失败，显示上传出错
        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('.file-status').text('上传出错');
        });
        // 完成上传完后将视频添加到视频列表，显示状态为：转码中
        uploader.on( 'uploadComplete', function( file ) {
            // $( '#'+file.id ).find('.file-progress').fadeOut();
        });

        $btn.on('click', function () {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            uploader.upload();
        });
    })
</script>
</body>
</html>

搁浅伟岸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webupload上传视屏到服务器，ffmpeg分片到阿里oss,前段播放分片之001

问题在使用微博发布一个视屏时，发现微博只能在关注的首页发表，而刷新了一下之后，你上传的视屏就会消失，短时间内是搜索不到的。自己的结论上传完文件后，发送消息到mq,通知服务器有文件需要操作，微博服务端通过ffmpeg 分片整个视屏（我当时认为这个过程是他耗时间的重要原因，，不过确实是，但是复杂的多）百度后的结果大家可去去看看https://blog.csdn.net/vn9PLgZvnP...
复制链接

扫一扫