fileslicing v1.2.0

DEMO

npm 地址

java后端代码参考地址

###########环境依赖

node npm webapck

###########部署步骤

1. 下载npm包 npm install fileslicing --save-dev

2. 引入node包 import Fileslicing from 'fileslicing'

3. 实例化fileslicing对象 let fileslicing=new Fileslicing()

###########目录结构描述

├── Readme.md // help ├── dist // 打包过后的文件 │ ├── fonts // 打包后的font文件 │ └── index.js // 打包后的所有文件 ├── src │ └── object // 源码对象存储 ├── assets // 静态文件存储了font文件 ├── index.js // 测试文件 ├── index.html // 测试文件 └── node_modules

###########测试文件

    index.html
    index.js 

###########V1.1.5 版本内容更新

let fileslicing=new Fileslicing()

fileslicingProtoType

方法

1. fileslicing对象提供 addItem 方法

   let index=fileslicing.addItem(data)
       需要传入对象data:{
           file:file,
           sliceNum:sliceNum,//需切块数
           updataUrl:,updataUrl,//上传url
           httpPathFileInfo:httpPathFileInfo,//下载文件信息查询url
           httpPathlDownload:httpPathlDownload,//下载文件url
       }
       此为必传项,fileslicing对象上有其他属性请查看

   item对象

    返回在itemArry对象存储的下标

2. fileslicing对象提供 setItem 方法

   fileslicing.setItem(index,state)
   调用单项的setItem方法和单个对象的setItem一致，需多传入下标
   
       需要传入index下标及需要更改的数据,state:{...data,progress:20}
       progress:进度条,自动更改进度条数据

3. fileslicing对象提供 setOpen 方法

   fileslicing.setOpen()
   关闭打开浮窗

fileslicingType

属性

1. this.cudUpdataBox = null //主体上传浮动弹窗dom节点

2. this.cudUpdataBoxSmall = null //省略图标上传浮动弹窗dom节点

3. this.itemArry 单个 FileSlicingFile 对象存储数组

4. this.fileSlicingObjectFactory 工厂类，内置所有可使用对象

5. this.isOpen 控制主体上传浮动弹窗/省略图标上传浮动弹窗显示隐藏订阅者对象 提供 setState 方法 自动触发显示

let item=fileslicing.itemArryindex

itemProtoType

方法

1. item单个对象提供 setItem 方法

   item.setItem(state)
       与父组件方法一致，不用传入下标

2. item单个对象提供 stop 方法

   item.stop(callBack)
       

   /**
    *  如有其他处理方式回调给业务自己处理
    *  if (callBack) {
    *       callBack(e, this)
    *   } else if (this.stateStop) {
    *       this.stateStop()
    *  }
    *}
   */

       可传入自定义暂停回调方法

3. item单个对象提供 continue 方法

   /**
    *  如有其他处理方式回调给业务自己处理
    *  if (callBack) {
    *       callBack(e, this)
    *   } else if (this.continue) {
    *       this.continue()
    *  } else{
    *       this.flieDispose.update(this.updataUrl, this)
    *  }
    *}
   */

   item.continue(callBack)
       可传入自定义继续下载回调方法

4. item单个对象提供 bottomFile 方法

   item.bottomFile(callBack)

   /**
    *  如有其他处理方式回调给业务自己处理
    *  if (callBack) {
    *       callBack(e, this)
    *   } else if (this.bottomFile) {
    *       this.bottomFile()
    *  } else{
    *                   flieDispose.bottomHttp(this.httpPathlDownload, *this.httpPathFileInfo, this.md5, this.name)
    *  }
    *}
   */

       可传入自定义下载回调方法

5. item单个对象提供 remove 方法

   item.remove(callBack)
       可传入自定义删除回调方法

itemType

属性

1. //保存父类，删除 this.parentClass = parentClass

2. //保存自己下标 this.index = index

3. //创建工厂 this.fileSlicingObjectFactory = fileSlicingObjectFactory;

4. //获取文件处理对象 this.flieDispose

5. //初始化基本信息 this.name = name

6. //文件类型 this.type = type

7. //初始化进度条 this.progress = 0

8. //flie对象 this.file = state.file

9. //httpState是否启用 暂停状态 this.httpState = true

10. //需切块数 this.sliceNum = state.sliceNum

11. //已上传的块数 this.oldSliceNum = 0

12. //上传方法 this.stateFileHttp = state.stateFileHttp

13. //暂停方法 this.stateStop = state.stateStop

14. //继续方法 this.stateContinue = state.stateContinue

15. //下载方法 this.stateNottomFile = state.stateNottomFile

16. //删除方法 this.stateRemove = state.stateRemove

17. //切好的文件数组 this.flieDispose.flieSlice

18. //上传url this.updataUrl = state.updataUrl

19. //下载文件信息查询url this.httpPathFileInfo = state.httpPathFileInfo

20. //下载文件url this.httpPathlDownload = httpPathlDownload,

联系方式 QQ:820553083