ai平台系统上传组件的集成适配vue-simple-uploader

一、问题背景

当前整个ai平台的本地上传用户体验非常不友好，主要表现为上传速度过慢且服务端容易崩溃，没有上传速率的展示、已上传大小的显示、剩余时间的显示，缺少很多必要信息展示给用户，让用户不清楚当前上传的具体详细过程, 更是缺乏断点续传和妙传这些非常实用的功能。

二、问题分析

1.上传缓慢

由于是大文件上传，采用的分片上传的方式，老的方案是前端每次发送多个切片请求，中控服务端用一个单实例去接收，导致接收特别缓慢，还容易阻塞线程发生服务端崩溃的问题。需要考虑用一种处理数据效率高的方式去接受数据并能快速合并，推到，

2.上传速率，

目前很多主流的本地上传都支持上传速度的展示，由于我们没有监听每秒上传了多少片文件，不可能准确的知道上传的具体速度；

3.秒传和断点续传

要实现断点续传，就要知道每片文件的md5值，知道了每片并每次上传分片的时候把该文件的md5值传给服务端；由于当前本地上传逻辑中没有针对文件和分片文件的md5的计算，所以这种类似的功能没法实现；

秒传是指服务端已经有该文件了，在本地上传之前需要检测文件的md5值，将md5值传给服务端，服务端检测到已经有该文件的md5值，直接在服务端已经同步，不需要本地再上传；

三、解决方案

1.上传缓慢

由于是大文件上传，采用的分片上传的方式，老的方案是前端每次发送多个切片请求，中控服务端用一个单实例去接收，导致接收特别缓慢，还容易阻塞线程发生服务端崩溃的问题，现在的方案是单独部署一个服务端，采用多实例的线程去接前端发过来的请求，根据前端发过切片的数据和索引，插到指定的一段buffer中，当最后一片上传成功之后，合并传过来的文件，合并之后再把该文件推送到指定的文件服务器中。

2.上传速率

要实现上传速率这一功能，前端需要定期（每秒）监听该段时间内发送的了多少片给服务端，总的发送多少片数除以总的时间，就是每秒发送的片数，就是上传的速率，把这个值更新到file中，前端拿到这个值就可以直接展示对应的上传速率了；

3.秒传和断点续传

实现断点续传，必须要知道上传了多少片文件，我们知道每片文件的唯一确定值是md5，所以每次分片上传给服务端之前，需要先计算该片的md5值，这个md5值随着这一片传给后端，后端接受到这片文件和该片文件的md5值一起存下来，当我们点击暂定终止本地上传，此时服务端会记录已经上传的每一片文件的md5和整个文件的md5，当再次点击续传的时候，会先发送一个请求去判断服务端有没有此文件，如果已经有文件了只是文件并不是一个完整的文件，是一些分片的文件，此时会返回给前端已经上传文件的md5和索引信息，前端接受到这些信息之后，会过滤掉这些已经上传的分片文件，把余下的片文件信息传给服务端，当上传完最后一片文件时，服务就拿到了整个完整文件，自此断点续传整个功能就实现了 秒传实现方案和断点续传类似，比断点续传还要简单一些，

4.大文件上传的完整流程设计

四、集成步骤

1.拉代码

拉取it-uiue代码  <git@git.iflytek.com:CBG_AI_Cloud2.0/it-uiue>  切换到feature/dev分支下，如果有新增平台级公共组件，从feature/dev分支下新建自己的分支，修改后合并到feature/dev分支。

代码拉取成功后，打开本地项目，在webpack.base.config.js中，找到如图位置，是本地启动则将本地运行的代码注释去掉，如果是直接集成样式，则将打包运行的代码注释打开，注释掉本地运行的代码。

2.拷贝代码

在项目下执行npm run build命令， 找到dist目录下的it-uiue文件夹，复制到平台项目中的assets目录下，在it-uiue文件夹下

3.引入路径

//
`import Input from ``'@/assets/it-uiue/components/uploadNew/uploader'`

4.本地上传组件引入注意区分

1.uploader组件不带上传进度条,进度条展示在另一个弹窗里面

2.uoloaderProgress本地上传组件带进度条

5.上传组件下载

5.1 npm下载vue-simple-uploader和spark-md5

npm install vue-simple-uploader@0.7.6 spark-md5@3.0.2 -S

5.2 注册全局组件

import uploader from 'vue-simple-uploader';

Vue.use (uploader);

6.组件引用 1.组件直接导入替换去掉旧的组件导入

import resumable from "@/assets/it-uiue/components/uploadNew/uploader";

2.修改最新上传服务端地址

//上传地址
target: `${$.defaults.baseURL.replace(
          "/deeplearn-server/",
          "/common-server/"
        )}/file/upload`,
        
//取消上传地址
cancelTarget: `${$.defaults.baseURL.replace(
          "/deeplearn-server/",
          "/common-server/"
        )}/file/cancelUpload`,

五、效果展示

这篇好文章是转载于：学新通技术网