前端临床手札——文件上传

文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。大多文章之所以只说上传这步估计是简单易入门，但是实际工作时就会发现上传文件这个功能上是简单的，逻辑上却比较复杂。

先说一下需求和功能点：

需求：上传文件到服务器
功能：上传

单这么看是简单的，下面再补充一下：

需求2：
    需要对图片裁剪压缩
    文件必须控制在2MB内
    上传文件必须是图片，包含的文件格式有:jpg、gif、png、jpeg、bmp
    上传文件到服务器
    记录上传文件（包含文件名字、位置、后缀、大小等）
功能：
    判断文件格式
    裁剪压缩图片
    上传
    记录数据

也不算复杂，可是这个从业务上来看只是单单的上传功能而已，用户可能还会提出更多要求，如：需要可视化信息(显示上传进度、提示上传成功或失败)、选择上传位置（或云存储，如：七牛）、需选择上传后的文件等其他需求，这就不细说了。

还是说说我遭遇的较为复杂的需求：

需求3：
    上传文件
    文件是图片则上传到[图片]仓库，是视频则上传到[视频]仓库，其他则上传到[其他]仓库
    需要对图片裁剪压缩
    文件大于2MB需启用分片上传
    上传至七牛云储存
    显示上传进度、提示上传结果
    记录上传文件（包含文件名字、位置、后缀、大小等）
功能：
    判断文件格式
    请求相应仓库上传token
    --图片--
    获得文件md5（作为文件名）
    裁剪压缩图片
    --视频--
    判断文件大小，大于2mb开启分片上传
    上传
    记录数据

这里面包含各种组件间数据传输、异步数据获取等问题尤为恶心...所以我还是拿需求2这份继续下面话题。

就目前需求能看出功能点是串行的，如下：

function upload(file){
    var verify = function(file){ return new Promise(...) },
        cut = function(file){ return new Promise(...) },
        upload = function(file){ return new Promise(...) },
        error = function(){...};
    return verify(file).then(cut).then(upload).catch(error);
}

//file change event
upload(e.currentTarget.files[0]).then(/*记录数据*/).catch(...);

若上传组件考虑可扩展性得把逻辑处理分离出来，逻辑处理也能以组件方式引入其中并予以调用。但前提是需要约定传入值和返回类型。

//上传类
function UploadFile(file){
    this.file = file;
    this.name = file.name;
    this.size = file.size;
    this.toFormData = function(data){...};
}

var uploader = new Uploader(),
    verify = function(uploadFile){ return new Promise(...) },
    cut = function(uploadFile){ return new Promise(...) };
uploader.precondition.add([verify,cut]);

//file change event
var key = function(uploadFile){ return new Promise(...) },
uploader.precondition.add(key); //可添加新条件
uploader.upload(new UploadFile(e.currentTarget.files[0])).then(/*记录数据*/).catch(...);

说这么多概念上的东西为的就是记录下工作时的真实情况，需要考虑的不单是功能，还得理解用这个功能的人背后的故事。