浅述上传资源文件

本文章适合初学者或者对上传资源文件逻辑不熟的伙伴们借鉴，大神勿喷！

需求：上传图片

需要考虑的问题：多张图片的上传是异步的，然而你并不知道什么时候全部上传完成

实现1：

 我们都知道文件使用new FormData()方式上传

var formDate=new FormData();

formData.append('file',file);

formData.append('fileType',fileType);

这个file就是你们获取到的本地文件（这里不具体介绍file怎么获取的了），fileType文件类型，有可能是图片/音频/视频

多个file的话通常我们会存入一个数组中，然后一次性上传，当然那种一选完就上传的情况除外。数组我们用fileArr表示

 结合起来步骤就是

for(var i=0,len=fileArr.length;i<len;i++){

 var successArr=[];

//上传的逻辑ajax,成功返回的数据我们再把他存入数组

 if(successArr.length===len){

 //最终成功回调

callback();

}

}

上面这种方式也是可以增加索引，使资源文件对应返回（可自行完善）

实现2：看了一下es6的promise，我可以这样修改一下

 let promiseArr=[];

 for(let i=0;i<fileArr.length;i++){

 let promise=new Promise((resolve)=>{

//上传的ajax请求,

 resolve(成功返回结果)

})

promiseArr.push(promise);

}

Promise.all(promiseArr).then((res)=>{

 //这里执行所有都上传成功的回调，对应上传序号的返回值

})

换了es6的promise写，代码就很清晰！！！

总结：es6的promise很好用，可以简化很多不必要的代码逻辑。其实在promise还可以穿插es7的async..await，

可以做二次上传（稍微解释一下，我们开发中上传资源文件先上传一次获取图片对应的随机数，再拿随机数去服务器拿图片id，

中间这一层是为了相同图片不用重复存储在服务器中，减少服务器的压力），这时候配合async..await就很轻松实现这种需求。