zoukankan      html  css  js  c++  java
  • 关于WebUploader上传文件插件的headers.token拦截问题

    WebUploader 事件说明

    uploadBeforeSend
    • object {Object}
    • data {Object}

      默认的上传参数,可以扩展此对象来控制上传参数。

    • headers {Object}

      可以扩展此对象来控制上传头部。

    当某个文件的分块在发送前触发,主要用来询问是否要添加附带参数,大文件在开起分片上传的前提下此事件可能会触发多次。

    WebUploader   API文档

    angularjs中添加一个拦截器,比如说一下例子:

    //增加一个提交token
    sxApp.factory('sessionInjector', function ($rootScope,locals) {
        // Service logic$rootScope.sysuser.token
        var sessionInjector = {
            request: function(config) {
                config.headers.token =  locals.getObject("accessToken");
                if(config.method=="POST"){
                    ... ...
                }
                return config;
            }
        };
        return sessionInjector;
    });

    这里的 headers.token 对WebUploader插件不起作用,这时就需要在WebUploader中对header进行配置,找到webuploader.js中的uploadBeforeSend 方法,在上传操作方法_doSend 中定义的header中,添加headers.token = GlobalConfig.token;这一句代码

                 /**
                 * @event uploadBeforeSend
                 * @param {Object} object
                 * @param {Object} data 默认的上传参数,可以扩展此对象来控制上传参数。
                 * @param {Object} headers 可以扩展此对象来控制上传头部。
                 * @description 当某个文件的分块在发送前触发,主要用来询问是否要添加附带参数,大文件在开起分片上传的前提下此事件可能会触发多次。
                 * @for  Uploader
                 */
    
                // 做上传操作。
                _doSend: function( block ) {
                    var me = this,
                        owner = me.owner,
                        opts = me.options,
                        file = block.file,
                        tr = new Transport( opts ),
                        data = $.extend({}, opts.formData ),
                        headers = $.extend({}, opts.headers ),
                        requestAccept, ret;
    
                    headers.token = GlobalConfig.token;
                    block.transport = tr;
    
                    tr.on( 'destroy', function() {
                        delete block.transport;
                        me._popBlock( block );
                        Base.nextTick( me.__tick );
                    });

    注意:由于angularjs和jQuery之间传值比较麻烦,在这里就申明了一个全局变量GlobalConfig.token在angularjs和jQuery之间传值。

    在config.js中申明一个全局变量:

    function GlobalConfig(){
    
    }
    GlobalConfig.token="";
    (function(){
    
    })();

    在app.js中传值:

    GlobalConfig.token = locals.getObject("accessToken");
  • 相关阅读:
    基于HTML5的可预览多图片Ajax上传
    在linq查询环境下通过sql语句来访问数据库
    EF查询数据库框架的搭建
    用多线程处理后台业务,并提高处理速度
    WPF 大数据加载过程中的等待效果——圆圈转动
    .NET一个线程更新另一个线程的UI(两种实现方法及若干简化)
    通电螺线管与磁场方向
    MOS管与三极管
    word2007怎样从中间某一页开始设置页码
    word删除页眉横线
  • 原文地址:https://www.cnblogs.com/miny-simp/p/9087348.html
Copyright © 2011-2022 走看看