@mofiter/osc-file-uploader v0.0.8

文件上传模块

基于 simple-uploader.js 修改，以满足业务需求，支持秒传、分片上传、断点续传。

文件上传流程：

• 选择文件
• 计算文件唯一 id（xxhash 或 md5，默认是 xxhash）
• 发起进度检查的请求，查询文件是否已经上传，如果已经完整上传，则属于秒传的情况，直接返回文件 url；如果没有上传或者已经上传部分分片，则返回未上传的分片数组
• 针对每一个未上传的分片，发起上传请求
• 当所有分片上传完成后，发起合并请求，合并成功后，返回文件 url
• 在分片上传过程中，可以暂停上传。而继续开始上传时，会先再次发起进度检查的请求，查询剩余需要上传的分片（因为有可能其他地方已经上传了当前文件的部分分片），然后再发起上传请求

安装

npm install @mofiter/osc-file-uploader

使用

创建一个 Uploader 实例：

var uploader = new Uploader({})

指定 DOM 节点，点击选择文件：

uploader.assignBrowse(document.getElementById('upload-btn'))

指定 DOM 节点，拖拽选择文件：

uploader.assignDrop(document.getElementById('drop-target'))

监听文件上传过程中的事件：

// 添加单个文件，可以用于文件校验，如果返回 false，则不添加
uploader.on('fileAdded', function (file, event) {
    console.log('fileAdded', file, event)
})
// 添加多个文件，可以用于文件校验，
uploader.on('filesAdded', function (files, fileList, event) {
  console.log('filesAdded', files, fileList, event)
})
// 文件已经加入到上传列表中，一般用来开始整个的上传
uploader.on('filesSubmitted', function (files, fileList, event) {
  // files 是本次加入到上传列表中的文件，uploader.files 是已经加入到上传列表中的全部文件
  console.log('filesSubmitted', files, fileList, event)
})
// 一个文件被移除
uploader.on('fileRemoved', function (file) {
  console.log('fileRemoved', file)
})

常用 API

配置项

见原有配置，已经基于业务逻辑，改了很多默认的配置项，所以大多数不需要修改

• target：可以是一个函数，用来返回接口地址，函数参数为文件 file，分片 chunk，是否是进度检查的请求 isTest，是否是合并请求 isMerge。根据不同情况，返回不同接口地址 url
• processParams：可以是一个函数，用来返回接口需要的参数，函数参数为默认参数 params，文件 file，分片 chunk，是否是进度检查的请求 isTest，是否是合并请求 isMerge。根据不同情况，返回不同接口需要的参数
• autoUpload（新增）：是否选择文件后自动开始上传，默认为 false
• hashType（新增）：用来配置计算文件唯一 id 的方式，默认是 xxhasm，可以配置成 md5，但需要和后端保持一致，否则会导致合并失败
• statusText（新增）：用来配置文件上传过程中不同状态的文字内容

方法

见原有方法 手动开始上传时，调用 resume() 方法，不要调用 upload() 方法

事件

在原有事件的基础上，增加了 calcHashStart、calcHashEnd、fileMergeStart、fileMergeEnd、fileStatus 几个事件

• uploader.on('calcHashStart', function(file) {})：开始计算文件唯一 id 时的事件，回调参数为当前文件 file
• uploader.on('calcHashEnd', function(file, hash) {})：计算文件唯一 id 完成时的事件，回调参数为当前文件 file，文件 hash
• uploader.on('fileMergeStart', function(file) {})：开始合并文件时的事件，回调参数为当前文件 file
• uploader.on('fileMergeEnd', function(file) {})：合并文件结束时的事件，回调参数为当前文件 file
• uploader.on('fileStatus', function(file, status, statusText) {})：文件上传的当前状态，有等待上传、正在计算唯一 id、上传中、上传暂停、合并中、上传成功、上传出错等几种情况，回调参数为当前文件 file，状态 status，状态文本 statusText，可以通过 uploader 的配置项 statusText 修改文本内容