【layui】阿里云OSS上传插件 aliossUploader [视频上传]

详细参照官网组件
阿里云 OSS 上传插件 aliossUploader
备用链接
GitHub地址-Layui-AliossUploader

1、引入js

createScript("/static/admin/layui/lay/modules/aliyun-oss-sdk-6.8.0.min.js");
layui.use(['admin','form','aliossUploader','view','setter','layer'], function(){
   var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,aliossUploader = layui.aliossUploader
        ,router = layui.router();
});

2、在config.js中添加扩展的模块

3、视频上传

layui.use(['admin','form','upload','aliossUploader','view','setter','layer'], function(){
    var $ = layui.$
         ,admin = layui.admin
         ,setter = layui.setter
         ,element = layui.element
         ,form = layui.form
         ,view = layui.view
         ,layer = layui.layer
         ,upload = layui.upload
         ,aliossUploader = layui.aliossUploader
         ,router = layui.router();

        // 视频上传
        aliossUploader.render({
            elm: '#LAY_avatarUpload',
            policyMethod: 'GET',
            policyUrl: window.location.origin+'/datas/DataVideos/upload_oss_info',
            fileType: 'video',
            // region表示您申请OSS服务所在的地域，例如oss-cn-hangzhou。
            region: 'oss-cn-hangzhou',
            policyData: {},
            policyHeader: {},
            multiple: false,
            httpStr: 'https',
            policyFailed: function(res){
                console.log(res)
                $('#video_src').val(res.host+res.name);
            },
            allUploaded: function(res){
                console.log(res)
            }
        });        
        // 视频预览
        window.see_video=function(){
            var url = $('#video_src').val();
            if(!url){
                layer.msg("请上传视频");
                return
            }
            var html = '<div class="wrap">';
            html += '<video width="500" height="500" controls autobuffer autoplay="autoplay">';
            html += '<source src="'+url+'" type="video/mp4" />';
            html += '</video>';
            html += '</div>';
            //弹出层
            layer.open({
                type: 1,
                skin: 'layui-layer-demo', //样式类名
                anim: 2,
                area: ['500px', '554px'],
                shadeClose: true, //开启遮罩关闭
                title: "视频预览",
                content: html
            });
        };
});

4、配置字段

属性名称	作用	默认值
elm	绑定按钮的jq选择器
fileType	指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）	‘file’
multiple	是否多文件上传	false
layerArea	多文件上传打开的弹窗的大小	‘auto’
layerTitle	上传多文件弹窗标题	上传文件到阿里云OSS
policyUrl	请求签名的url
policyData	请求签名的参数	{}
policyHeader	请求签名的headers	{}
codeField	请求签名返回的状态码字段	‘code’
codeStatus	请求签名返回的成功状态码值	0
policyMethod	请求签名的方法	‘GET’
accessidFiled	返回签名的accessid字段名称	‘accessid’
policyFiled	返回签名的policy字段名称	‘policy’
signatureFiled	返回签名的signature字段名称	‘signature’
httpStr	上传至OSS时是否https	‘https’
region	OSS的数据中心所在的地域	‘oss-cn-hangzhou’
bucket	OSS的存储空间命名
prefixPath	上传多文件的前缀(相当于文件夹,可写多级,但不能以/开头必须以/结尾,如’aaa/bbb/‘’)	‘’
allUploaded	文件上传成功后的回调(多文件为所有文件上传完成后的回调)
allUploaded-res	allUploaded回调参数中的res结构为:{name:文件名称,type:文件类型,ossUrl:上传成功后的文件请求url(形状与上面的httpStr参数一致)}
policyFailed	请求policy失败后的回调
uploadRenderData	支持部分layui的upload的参数配置	{}

注意：使用此插件还需要注意的是需要配置阿里oss的跨域,设置post可进行跨域访问,不然图片上传是不会成功的。