upload_sdk/index.js

import { Constants } from './utils/contants'
import getFilemd5sum from './utils/utils'

function FileFactory(file) {
  this.offset = 0; //用于断点续传，默认为 0
  this.BYTES_PER_CHUNK = 1024 * 1024
  this.file = file
  this.fileSize = file.size
  this.fileType = (file.name.split('.')[1]).toLowerCase()
  this.chunkNum = this.BYTES_PER_CHUNK > this.fileSize ? Math.ceil(this.fileSize / this.BYTES_PER_CHUNK) : 1
  this.chunkSize = this.BYTES_PER_CHUNK > this.fileSize ? this.fileSize : this.BYTES_PER_CHUNK
}

FileFactory.prototype.setOffset = function (offset) {
  this.offset = offset
}

export default function UploadSdk(host, origin, token, file) {

  this.handlers = [] //用于处理出触发事件
  this.host = host.indexOf('http:') > -1 ? 'http:'+ host: host
  this.origin = origin
  this.token = token
  this.file = file

  this.generateMd5 = function (callback) {
    getFilemd5sum(this.file).then(result => {
      callback(result)
    })
  }

  this.imageUploadAction = function () {
    return new Promise((resolve, reject) => {
      let fileFactory = new FileFactory(this.file)
      if (!fileFactory.fileType.match('[(jpg)|(png)|(gif)]+$')) {
        reject(Constants.IMAGE_TYPE_ERROR)
      }
      this.generateMd5((md5) => {
        this.md5 = md5
        this.postImage(this.md5, fileFactory).then(res => {
          resolve(res)
        }).catch((err) => {
          reject(err)
        })
      })
    })
  }

  this.videoUploadAction = function () {
    return new Promise((resolve, reject) => {
      if (!this.file.type.match('[(mp4)|(rmvb)|(flv)|(mpeg)|(avi)]+$')) {
        reject(Constants.VIDOE_TYPE_ERROR)
      }
      this.postVideo().then(res => {
        resolve(res)
      }).catch((err) => {
        reject(err)
      })
    })
  }

  this.postVideo = function () {
    const self = this
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest()
      xhr.open('POST', this.host + Constants.VIDEO_MULTIPART + this.origin, true)
      xhr.withCredentials = true;
      xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
      xhr.setRequestHeader('Content-type', 'application/json')
      xhr.upload.addEventListener("progress", function updateProgress(oEvent) {
        if (oEvent.lengthComputable) {
          let percentComplete = oEvent.loaded / oEvent.total * 100;
          self.emitUpdateProgress(percentComplete)
        }
      }, false)
      let fd = new FormData()
      fd.append('file', this.file)
      fd.append('code_rate', 'ld,sd,hd')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          let obj = JSON.parse(xhr.responseText)
          if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
            resolve({
              code: Constants.UPLOAD_SUCCESS_CODE,
              url: obj.url,
              msg: 'success'
            })
          } else {
            reject({
              code: Constants.UPLOAD_FAILED_CODE,
              url: '',
              msg: obj.message
            })
          }
        }
      }
    })
  }

  this.postImage = function (md5, fileFactory) {
    const self = this
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest()
      xhr.upload.addEventListener("progress", function updateProgress(oEvent) {
        if (oEvent.lengthComputable) {
          let percentComplete = oEvent.loaded / oEvent.total * 100;
          self.emitUpdateProgress(percentComplete)
        }
      }, false)
      xhr.open('POSt', this.host + Constants.IMAGE_MULTIPART + this.origin, true)
      xhr.withCredentials = true
      xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
      xhr.setRequestHeader('X-Upload-File-Size', fileFactory.fileSize)
      xhr.setRequestHeader('X-Upload-Chunk-Index', 1 + '')
      xhr.setRequestHeader('X-Upload-Chunk-Num', fileFactory.chunkNum)
      xhr.setRequestHeader('X-Upload-Chunk-Size', fileFactory.chunkSize)
      xhr.setRequestHeader('X-Upload-Offset', fileFactory.offset + '')
      xhr.setRequestHeader('X-Upload-File-Md5', md5)
      xhr.setRequestHeader('X-Upload-File-Type', fileFactory.fileType)
      let fd = new FormData()
      fd.append('file', this.file)
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          let obj = JSON.parse(xhr.responseText)
          if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {

            if (obj.status === 1) {
              resolve({
                code: Constants.UPLOAD_SUCCESS_CODE,
                url: obj.url,
                msg: 'success'
              })
            } else if (obj.status === 0) {
              fileFactory.setOffset(obj.msg)
              this.getAllResponseHeaders.postImage(md5, fileFactory)
            }
          } else {
            reject({
              code: Constants.UPLOAD_FAILED_CODE,
              url: '',
              msg: obj.message
            })
          }
        }
      }
    })
  }
}

UploadSdk.prototype = {

  onUpdateProgress: function(subscriber){
    let isExist = this.handlers.some(function(item){
      return item == subscriber;
    })
    if(!isExist){
      this.handlers.push(subscriber);
    }
    return this;
  },
  
  emitUpdateProgress: function(data){
    this.handlers.forEach(function(fn){
      fn(data)
    })
    return this;
  }
}