02-上传文件夹-断网续传

先列举几个开发过程中遇到的问题:

待研究问题:

1.用element中的beforeUpdate钩子函数直接实现上传,不只是上传图片还要携带参数。

 

最后发现,请求是一个个发出去了(按照准备的上传队列),但是发的是同一张图片和一样的参数,有时间研究一下为什么是这样?

如果这样行得通,那么element上传的钩子函数都可以去使用了。

最终的解决方案就是在上传前的这个钩子中自己构建的formdata,用axios去实现上传。


 几个要点:

1.选择文件夹时候,获取全部文件队列,组织接口要的数据结构去做调接口验证

2.把验证结果组织数据后映射给表格。并且组装上传正确的文件集合(服务端返回的文件信息)

3.拿着选择的文件总队列去比对上一步组装的正确文件集合,过滤出可以真正能上传的文件队列

4.监听选择后的总队列,只要选择总队列发生变化,就调用校验方法,原来是做了一个校验按钮,但是发觉不行,这样会造成多次选择但不校验,不校验的话就不能初始化总选择队列,就会造成冗余文件进入到总队列,应该是每次选择都是当前这一个文件夹中的内容作为新得上传队列,故去掉检测按钮,做监听自动调用。

4.上传前钩子函数中:

  (1)构建formdata,用axios去请求,上传前钩子函数中的file就是准备好的上传队列的一个个文件

    (2)在axios里上传中response的钩子函数中去通过res的结果是否为true去计数,为了上传途中,到最后一张时候上传进度赋值为100。

  (3)上传成功的回调函数收集<1>上传成功的个数+失败回调的个数 > 上传总队列个数,说明上传完了,作为隐藏上传进度条和loading遮罩效果的结束条件。

  (4)上传成功与失败的回调函数中去根据个数去映射表格的上传结果和如有失败即显示失败原因。

5.断网续传:

  (1)在上传回调中提前组织上传成功文件的数组,在finally回调里用总队列上传列表去过滤掉成功的即是失败的,组织失败队列

  (2)开启网络监听,断网时,终止所有正在pending的上传请求。

  (3)重新连网后,用组织好的失败队列作为连网后的新的上传队列。(不能在断网的时候赋值给上传队列,因为断网的时候,也可以说那刹那,用的还是<1>的条件作为关闭进度和loading的触发条件,这时候,新的上传队列就是错误的队列,自然恒等,就瞬间关闭进度和loading了,不会停留在原有上传进度了。)

      并开启一个小小的延时提交新的重新上传请求(确保新的上传队列站稳脚跟)

      准备一个变量从初始值赋值为true表示是从断网到连网的标识。

  (4)监听原来组织的失败队列,依据之前准备好的标识如果是重新联网的话,并且失败队列的长度为0,那么就说明全部成功上传了,这个作为关闭进度条和loading的触发条件。(因为不断网的上传有自己的判断条件,看前面标红的<1>)

  (5)关闭弹框时候,杀死所有的上传请求,避免表面关闭了弹框,又去请求其他页面出不来数据(上传队列如果>=6,浏览器线程全被上传占用,要访问的页面只能等待)

 

 

原文地址:https://www.cnblogs.com/haoqiyouyu/p/14465860.html