neixin-uploader v0.1.20

此项目转移到 power-uploader https://www.npmjs.com/package/power-uploader

文件传输SDK文档

引入方式

建议使用ES6引入。

import {Uploader, FileStatus} from 'neixin-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: true
});

初始化参数

其中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：文件路径
• selectFileTransactionId：文件组ID(可能吧)
• size：文件大小(字节数)
• source：原生文件对象
• statusText：文件状态，即FileStatus的值
• type：文件的MIME Type，egvideo/mp4

事件

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

• 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 } = obj;
  
      uploader.config.headers = {
          'cfp': encode(JSON.stringify({
              path: `/person/126222/测试/图片${new Date().getTime()}.jpg`
          }))
      };
      uploader.config.server = 'http://api.neixin.cn/pan/ul/6/storage/create.json';
  });

• 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)
      });
  });

• 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] }

  demo

  uploader.on('uploadSuccess', (obj) => {
      console.log('uploadSuccess');
      let { file, currendShard, shardCount, shard } = obj;
  
      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] }

文件夹相关的事件：

• selectDir：选择了文件夹，参数返回entry信息，通过return false; 可以禁止
• beforeChildFileQueued：文件夹中子文件进入队列，但是是假的，先不要用这个事件
• beforeChildDirQueued：文件夹子中文件夹进入队列，但是是假的，先不要用这个事件