关于WebUploader上传文件插件的headers.token拦截问题

最新推荐文章于 2024-08-22 17:14:27 发布

weixin_30273501

最新推荐文章于 2024-08-22 17:14:27 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/miny-simp/p/9087348.html

本文介绍如何在WebUploader中配置上传头部的Token，特别是在使用AngularJS时的方法。通过修改uploadBeforeSend事件，可以在每次分片上传前加入Token。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");

转载于:https://www.cnblogs.com/miny-simp/p/9087348.html