# fileslicing

**Repository Path**: zjmcc/fileslicing

## Basic Information

- **Project Name**: fileslicing
- **Description**: 大文件切片上传，断点续传，断点下载
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-04-26
- **Last Updated**: 2021-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

DEMO
===========================


# [npm 地址](https://www.npmjs.com/package/fileslicing)
# [java后端代码参考地址](https://gitee.com/suaker-quan/quan-boot)

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

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<br>
├── dist                        // 打包过后的文件<br>
│   ├── fonts                   // 打包后的font文件<br>
│   └── index.js                // 打包后的所有文件<br>
├── src                      <br>
│   └── object                  // 源码对象存储<br>
├── assets                      // 静态文件存储了font文件<br>
├── index.js                    // 测试文件<br>
├── index.html                  // 测试文件<br>
└── 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对象](#itemType)


        返回在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.itemArry[index]
## itemProtoType
## 方法
1. item单个对象提供 setItem 方法
    
        item.setItem(state)
            与父组件方法一致，不用传入下标

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

        item.stop(callBack)
            
    ```javascript
    
    /**
     *  如有其他处理方式回调给业务自己处理
     *  if (callBack) {
     *       callBack(e, this)
     *   } else if (this.stateStop) {
     *       this.stateStop()
     *  }
     *}
    */
    
    ```
            可传入自定义暂停回调方法

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

    ```javascript
    
    /**
     *  如有其他处理方式回调给业务自己处理
     *  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)

    ```javascript
    
    /**
     *  如有其他处理方式回调给业务自己处理
     *  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. //保存父类，删除</br>
this.parentClass = parentClass

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

3. //创建工厂</br>
this.fileSlicingObjectFactory = fileSlicingObjectFactory;

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

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

6. //文件类型</br>
this.type = type

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

8. //flie对象</br>
this.file = state.file

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

10. //需切块数</br>
this.sliceNum = state.sliceNum

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

12. //上传方法</br>
this.stateFileHttp = state.stateFileHttp

13. //暂停方法</br>
this.stateStop = state.stateStop

14. //继续方法</br>
this.stateContinue = state.stateContinue

15. //下载方法</br>
this.stateNottomFile = state.stateNottomFile

16. //删除方法</br>
this.stateRemove = state.stateRemove

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

18. //上传url</br>
this.updataUrl = state.updataUrl

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

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



联系方式</br>
    QQ:820553083
-------