本文章适合初学者或者对上传资源文件逻辑不熟的伙伴们借鉴,大神勿喷!
需求:上传图片
需要考虑的问题:多张图片的上传是异步的,然而你并不知道什么时候全部上传完成
实现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就很轻松实现这种需求。