文件传输SDK文档

引入方式

建议使用ES6引入。

import {Uploader, FileStatus} from 'power-uploader';

• Uploader：文件传输SDK的构造类
• FileStatus：文件实例的状态
  • INITED：初始状态(beforeFileQueued事件之后就会变更)
  • QUEUED：已经进入队列, 等待上传
  • PROGRESS：上传中
  • ERROR：上传出错，可重试
  • CANCELLED：上传取消，会清出队列
  • INTERRUPT：上传中断，可续传
  • INVALID：文件不合格，不能重试上传

初始化

eg.

let uploader = new Uploader({
    pick: '.ff-wrap .up-btn',
    dnd: 'body, .dnd-area',
    paste: ['body', '.paste-area'],
    listenerContainer: document,
    body: document.body,
    chunked: true,
    chunkSize: 20971520,
    multiple: true,
    withCredentials: false
});

初始化参数

其中pick、dnd、paste填写选择器的时候支持Selector String，通过,分隔的Selector String，存放Selector String的数组。

file对象封装

file对象封装在事件回调函数中返回的参数对象里为file的key

• eventEmitter：事件发射器
• ext：文件后缀
• id：文件唯一标识符，eg：WU_FILE_0
• isFile：是否是文件(有可能是目录呢)
• lastModifiedDate：最后修改时间
• loaded：上传字节数
• name：文件名
• path：文件路径
• uploadGroupId：文件组ID
• size：文件大小(字节数)
• source：原生文件对象
• statusText：文件状态，即FileStatus的值
• type：文件的MIME Type，egvideo/mp4

事件

所有的事件的回调函数返回的参数均是一个对象，参数中可能有的值说明

• beforeFilesSourceQueued: 选择上传一组文件之前 包含目录源信息 @return Object { filesSource, actionType, uploadGroupId } demo

  uploader.on('beforeFilesSourceQueued', (obj) => {
      let {filesSource, actionType, uploadGroupId} = obj;
      if (actionType === 'pickDir') {
          // 选择的是文件夹
      }
      // 超过10个文件不允许上传
      if (filesSource.length > 10) {
          return false;
      }
  });
  

• filesSourceQueued: 选择上传一组文件之后 文件源信息 @return Object { filesSource, actionType, uploadGroupId } demo

  uploader.on('filesSourceQueued', (obj) => {
      let {filesSource, actionType, uploadGroupId} = obj;
      if (actionType === 'pickDir') {
          // 选择的是文件夹
      }
  });
  

• beforeFileQueued：文件添加到上传队列之前，可以对文件进行一些过滤，return false;会阻止将该文件加入队列。

  @return Object { file }

  demo

  uploader.on('beforeFileQueued', (obj)=> {
      console.log('beforeFileQueued');
      let { file, setContentType } = obj;
      setContentType('image/png'); // 更改文件的Content-Type  
  
      if (/^[^<>\|\*\?\/]*$/.test(file.name)) {
          let b1 = new Buffer(file.name);
          let bytes = Array.prototype.slice.call(b1, 0);
          if (bytes.length > 128) {
              alert('字符长度过长');
              return false;
          }
      } else {
          alert('存在特殊字符');
          return false;
      }
  
      return true;
  });
  

• fileQueued：没有被beforeFileQueued阻止，文件已经被添加进队列，等待上传。

  @return Object { file }

  demo

  uploader.on('fileQueued', (obj) => {
      console.log('fileQueued');
      let { file } = obj;
  
      this.setState({
          fileList: [...this.state.fileList, file]
      });
  });
  

• uploadStart：该文件已经开始上传(第一片分片已经上传了)。

  @return Object { file }

  demo

  uploader.on('uploadStart', (obj)=> {
      console.log('uploadStart');
      let { file } = obj;
  
      // 开始请求的文件statusText属性会有变化
      let newFileList = this.state.fileList.map(fileItem =>
          file.id === fileItem.id ? file : fileItem );
      this.setState({ fileList: newFileList });
  });
  

• uploadBeforeSend：每一个分片上传之前，可以修改new Uploader的时候传入的部分属性，如server、headers。

  @return Object { file, currentShard[Number], shardCount[Number], shard[Blob] }

  demo

  uploader.on('uploadBeforeSend', (obj)=> {
      console.log('uploadBeforeSend');
      let { file, currentShard, shard, shardCount, config } = obj;
  
      config.headers = {
          'name': file.name,
          'path': '/person/img'
      };
      config.server = 'http://xxx.com/file/upload';
  });
  

• uploadProgress：上传进度回调。

  @return Object { file, loaded[Number], total[Number], shardLoaded[Number], shardTotal[Number] }

  其中loaded和total是整体文件的，shardLoaded和shardTotal是单个分片的，file.loaded已经是loaded的值。

  demo

  uploader.on('uploadProgress', (obj)=> {
      console.log('uploadProgress');
      let { file, loaded, total, shardLoaded, shardTotal } = obj;
  
      console.log(loaded / total * 100 + '%', file.loaded);
      this.setState({
          fileList: this.state.fileList.map(item => item.id === file.id ? file : item)
      });
  });
  

• fileMd5Finished：上传进度回调。

  @return Object { file, md5 }

  demo

  uploader.on('fileMd5Finished', async (obj) => {
      let {file, md5} = obj;
      let res = await api.md5Check(md5);
      if (res.ok === true) {
          file.url = res.url;
          file.loaded = file.size;
          file.statusText = FileStatus.COMPLETE;
          render(file); // 渲染文件
          return Uploader.CONSTANTS.MD5_HAS;
      }
  });
  

• uploadAccept：分片上传成功。

  @return Object { file, shard[Blob], shardCount[Number], currentShard[Number], isUploadEnd[Boolean], responseText[String] }

  demo

  uploader.on('uploadAccept', async(obj)=> {
      console.log('uploadAccept');
      let { file, shard, shardCount, currentShard, isUploadEnd, responseText } = obj;
  });
  

• uploadSuccess：文件上传成功。

  @return Object { file, currentShard[Number], shardCount[Number], shard[Blob], responseText[String], responseTextArr[Array] }

  demo

  uploader.on('uploadSuccess', (obj) => {
      console.log('uploadSuccess');
      let { file, currendShard, shardCount, shard, responseText, responseTextArr } = obj;
  
      if (shardCount === 1) {
          // use responseText
      } else {
          // use responseTextArr
      }
  
      let newFileList = this.state.fileList.map(item => file.id === item.id ? file : item);
      this.setState({fileList: newFileList});
  });
  

• uploadEndSend：文件上传结束，成功失败都会触发。

  同uploadSuccess

• uploadError：文件上传失败。

  @return Object { file, error[Error] }

文件夹相关的事件：

• beforeChildFileQueued：文件夹中的子文件入队列之前 @return Object { fileSource, parentEntry, uploadGroupId, actionType }

• childFileQueued：文件夹中的子文件入队列之后 @return Object { fileSource, parentEntry, uploadGroupId, actionType }

• beforeChildDirQueued：文件夹中的子文件夹入队列之前 @return Object { currentEntry, parentEntry, uploadGroupId, actionType }

• childDirQueued：文件夹中的子文件夹入队列之后 @return Object { currentEntry, parentEntry, uploadGroupId, actionType }

• selectDir：选择了文件夹，参数返回entry信息，通过return false; 可以禁止 @return Object { entry, uploadGroupId, actionType }