文件上传实现方案概述

文件上传是很多项目中用到的功能，最近项目要实现文件上传下载，分片上传、断点续传、异步导出、同步导出等功能，所以去研究研究以下该内容，并将学习到的知识汇总写出来分享一下，以我自己的理解写出来。
文件上传的实现常见的有以下几种：
1、基于aioxs和jquery的上传；
2、基于element-ui中的uploader的上传；
3、基于webuploader的上传。
前两种基本相同，element-ui有ui样式，其最终的上传还是利用到aioxs和jquery的。1和2的优点是简单，缺点是对大文件的上传、网络故障重新上传没有支持，需要自己去实现，工作量较大，在往后的文章中会介绍基于两者的断点续传、分片上传的实现。webuploader是百度的一个文件上传框架，js的支持，ui样式需要自己去添加实现，其可以叫轻松实现断点续传、分片上传的功能。断点续传、分片上传的应用场合是大文件上传。而小文件的上传利用element-ui实现较轻量级，其ui也支持拖拽上传、头像上传、缩略图等。
下面分别大概介绍下这三者的一些基础理解：
1、基于aioxs和jquery的上传
代码如下：

2、基于element-ui中的uploader的上传

实现的效果：

  点击上传
  
只能上传jpg/png文件，且不超过500kb

这里的代码只是选中文件，然后展示出来，并没有发送请求到服务端，所有需要添加基于aioxs和jquery的上传，将data中的filelist发送到服务端。
element-ui官网

3、基于webuploader的上传
html部分

    
    

    

        
选择文件
        开始上传
    

创建webuploader对象，配置对象参数。

var uploader = WebUploader.create({

    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',

    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',
    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false
});

// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
    $list.append( '
' +
        '
' + file.name + '
' +
        '
等待上传...
' +
    '
' );
});

// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');
    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('
' +
          '
' +
          '
' +
        '
').appendTo( $li ).find('.progress-bar');
    }

    $li.find('p.state').text('上传中');

    $percent.css( 'width', percentage * 100 + '%' );
});

文件上传失败会派送uploadError事件，成功则派送uploadSuccess事件。不管成功或者失败，在文件上传完后都会触发uploadComplete事件。

uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).find('p.state').text('已上传');
});

uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上传出错');
});

uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});

最重要的是在创建webuploader对象时没有设置自动上传时需要触发上传，设置了自动上传就不需要设置触发。
触发上传的api

 uploader.upload();

以上时webuploader的基本使用，它还包括：

md5文件检查校验：对md5文件相同的可以跳过不上传，避免相同文件的上传。
分片上传、断点续传的支持。关于这些内容会在往后的文章中给出。
webuploader官网
这里只是概述性的描述文件上传的内容，提供一个思路，后面会一一给出具体的实现代码及原理说明等。
往后的内容包括：
1、原生的非组件的实现分片上传及断点续传，前后端代码及原理图；
2、基于webuploader的MD5检查、分片上传、断点续传，前后端代码及原理图。
以尽量追求详细、通俗易懂。