您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

web端在线客服开发经验总结-跨域文件上传与进度条

发布时间：2020-10-13 21:05:41编辑：雪饮阅读（）

集群服务器且文件系统各自独立，实现切片上传太过于繁琐，直接上传由于旧项目的php环境默认仅有2M上传限制。

上传限制：

.htacces文件可以动态修改以突破该配置尝试过没有搞定，用ini_set函数还是没有搞定。好在对方接口上传支持2M以上文件。那么就需要对方接口开启我们域名的跨域。

跨域：

然而发现对方开启了之后，通过jquery的ajax上传文件仍然有跨域。

最后才发现最关键的是contentType参数为false可以解决(在这里对方接口要求Content-Type:application/json，所以不加这个false也是因为对方的这个要求，而对方这个要求在header中，而contentType则是ajax的option的根参数，后来发现这里舍弃Content-Type的header设置竟然不影响)，当然为了文件上传processData为false也是必不可少。

上传进度：

说到上传进度以前曾经用文件分片原理实现过，但是这种太过于冗余，无意间发现jquery的ajax在option根参数xhr中可以定义上传进度获取，或许非文件类也可以获取响应进度。

如：

xhr: function() {
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
         xhr.upload.onprogress = function(e) {
             if (e.lengthComputable) {
                 $(".barColor").show();
                 var percent = Math.floor( e.loaded / e.total * 100);
                 console.log(percent);
                 if(percent == 100){
                     // $(".barColor").hide();
                 }else{
                     console.log("进度:"+percent + '%');
                     layer.msg(percent + "%");
                 }
             }
         };
     }
     return xhr;
 }

以上方案的具体实施如：

async function sendMessageWithFile(file){
    var formData = new FormData();
    formData.append("Attachments",file);
    load = layerLoad();
    var responseMessage=await new Promise((resolve=>{
        $.ajax({
            url:apiUrl+"/Group/"+group.ID+"/Messages",
            type:"post",
            dataType:'json',
            contentType: false,
            beforeSend: function(xhr) {
                xhr.setRequestHeader("accept","application/json");
                xhr.setRequestHeader("Authorization","Bearer "+userData.AccessToken);
            },
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.onprogress = function(e) {
                        if (e.lengthComputable) {
                            $(".barColor").show();
                            var percent = Math.floor( e.loaded / e.total * 100);
                            console.log(percent);
                            if(percent == 100){
                                // $(".barColor").hide();
                            }else{
                                console.log("进度:"+percent + '%');
                                layer.msg(percent + "%");
                            }
                        }
                    };
                }
                return xhr;
            },
            processData: false,
            data:formData,
            success:function(data){
                console.log("直连:",data);
                if(ajaxSuccess(data)==false) return;
                resolve(data);
            },
            error:ajaxError
        });
    }));
    var textarea=$(".textarea");
    var userViewInput=$("#userViewInput");
    if(textarea.length==1){
        textarea.val("");
    }
    if(userViewInput.length==1){
        userViewInput.val("");
    }
    responseMessage=messageItemInit(responseMessage);
    var flag=messageList.findIndex((val,index,arr)=>{
        return val.ID==responseMessage.ID;
    });
    if(flag==-1){
        messageList.push(responseMessage);
        app.$nextTick(function () {
            messageScroll();
        });
    }

}