Web直传解决并发上传出错，导致任务停止

2022-04-28 05:21:03

但是上述事例有一个现象
就是当一个文件在上传过程中，这个时候再选择一个不符合条件的文件，会导致正在上传的文件终止。

如此图

首先我们来分析一下为什么会出现这种现象
出现这种现象的原因是：plupload这个控件导致的。

plupload提示了filter

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : 'selectfiles',
    //multi_selection: false,
    container: document.getElementById('container'),
    flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
    silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
    url : 'http://oss.aliyuncs.com',

    /*
    注意在这里添过加滤的功能，会打断正在上传的队列。如果想选择错误的文件不打断，请在FileFilterd这个函数里面添加过滤的逻辑
    */
    filters: {
        mime_types : [ //只允许上传图片和zip,rar文件
        { title : "Image files", extensions : "jpg,gif,png,bmp" },
        { title : "Zip files", extensions : "zip,rar" }
        ],
        //max_file_size : '10mb', //最大只能上传10mb的文件
        prevent_duplicates : true //不允许选取重复文件
    },

filters参数指定上传时指定plupload会对上传文件的限制。我们来看一下。如果此时再上传一个非法的条件，会出现什么情况。要看一下plupload的源码


plupload.addFileFilter('max_file_size', function(maxSize, file, cb) {
    var undef;

    maxSize = plupload.parseSize(maxSize);

    // Invalid file size
    if (file.size !== undef && maxSize && file.size > maxSize) {
        this.trigger('Error', {
            code : plupload.FILE_SIZE_ERROR,
            message : plupload.translate('File size error.'),
            file : file
        });
        cb(false);
    } else {
        cb(true);
    }
});

这样就当发现文件大小出错之后，就出现文件尺寸出错了。直接跳到出错了。会跳转到上层的Error函数。相应的上传也出现了停止。

解决的方法

这个问题解决思路是自己实现Filter函数，因为用默认的函数，会触发代码的出错处理流程。我们自己采用自己的出错逻辑。如果出现，只报错，不影响正在处理的请求。

plupload提供了很多“勾子函数”，方便对各种情况下进行处理。我们现在增加一个函数：
FileFiltered
这个函数会在文件添加后触发。函数的逻辑就是，判断大小是不是符合。如果不符合，提示出错信息，然后将文件从插件remove

如果成功，就添加文件。

        FileFiltered : function(up, file) {
            /*
            在这里做过滤文件 上传的动作，避免解决因为上传文件有问题下在上传的队列出错。如果要实现这个，需要把filters相关功能禁止。在这里实现相关的功实现过滤的需求。
            */
            if (file.size < 5 * 1024 * 1024)
            {
                document.getElementById('console').appendChild(document.createTextNode(file.name + " is too small to upload"));
                up.removeFile(file)
            }
            else if (file.size > 100 * 1024 * 1024)
            {
                document.getElementById('console').appendChild(document.createTextNode(file.name + " is too large to upload"));
                up.removeFile(file)
            }
            else
            {
                document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
                +'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
                +'</div>';
            }
        },

码农公寓

相关文章