通过ES6 封装了一个上传文件的方法 XMLHttpRequest() 通用

export class UploadServers {

  constructor (options) {

    this.xhr = null

    this.startTime = null

    this.startFileSize = 0

    this.formData = null

    // this = options

    Object.keys(options).map(item => {

      this[item] = options[item]

    })

    this.init(options)

  }

  init (options) {

    this.config = {...this.config, ...options}

    this.xhr = new XMLHttpRequest()

    this.formData = new FormData()

    if (this.config.data && Object.prototype.toString.call(this.config.data) === '[object Object]') {

      // 循环添加其他参数

      this.config.data.keys(item => {

        this.formData.append(item, this.config.data[item])

      })

    }

    // console.log(this.config)

    // console.log(this.config.file.toString())

    // console.log(Array.prototype.slice.call(this.config.file).toString())

    if (this.config.file.toString() === '[object FileList]' || this.config.file.toString() === '[object File]' || this.config.file.toString() === '[object Array]' || this.config.file.toString().includes('[object File]')) {

      this.uploadFile(this.config.file, true)

    } else {

      this.uploadFile(this.config.file)

    }

  }

  uploadFile (file, isArray) {

    // this.xhr

    const _this = this

    if (isArray) {

      Object.values(file).forEach(function (item) {

        _this.formData.append(_this.config.uploadFileName, item)

      })

    } else {

      this.formData.append(this.config.uploadFileName, file)

    }

    this.xhr.open('post', this.config.url, true)

    this.xhr.onload = function (e) {

      _this.updataSucess(e)

    }

    this.xhr.onerror = function (e) {

      _this.updataError(e)

    }

    this.xhr.upload.onprogress = function (e) {

      _this.progressChange(e)

    }

    this.xhr.upload.onloadstart = function (e) {

      _this.startUpload(e)

    }

    this.xhr.send(this.formData)

  }

  startUpload (e) {

    // console.log(e)

    this.startTime = new Date().getTime()

    this.startFileSize = 0

  }

  updataSucess (e) {

    // console.log(e)

    // console.log(this)

    // console.log(uploadServers)

    this.config.success(e)

  }

  updataError (e) {

    console.log(e)

    this.config.error(e)

  }

  progressChange (e) {

    // console.log(e)

    if (e.lengthComputable) {

      const newTime = new Date().getTime()

      let pertime = (newTime - this.startTime) / 1000

      // 如果时间为0 则返回避免出现Infinity 兼容IOS进度函数读取过快问题

      if (pertime === 0) pertime = 0.001

      this.startTime = newTime

      const perload = e.loaded - this.startFileSize

      const lave = e.loaded / e.total

      this.startFileSize = e.loaded

      let speed = perload / pertime

      // console.log(perload, pertime)

      // const speeds = speed

      let units = 'b/s'

      if (speed / 1024 > 1) {

        speed = speed / 1024

        units = 'k/s'

      }

      if (speed / 1024 > 1) {

        speed = speed / 1024

        units = 'M/s'

      }

      if (speed / 1024 > 1) {

        speed = speed / 1024

        units = 'G/s'

      }

      // console.log(speed)

      speed = speed.toFixed(1)

      // console.log(speed)

      // const resout = ((e.total - e.loaded) / speeds).toFixed(1)

      this.config.progress(e, speed, lave, e.loaded, units)

    }

  }

}

      let initUploadFileChange = new UploadServers({

        url: _this.url,

        data: _this.data,

        file: fileList || null,

        fileClassName: null,

        uploadFileName: _this.fileOption || 'multipartFiles',

        progress: function (e, speed, lave, loaded, units) {

          // console.log(e, speed, lave, loaded, units)

          _this.percentage = parseInt(lave * 100)

        },

        success: function (e) {

          if (e.target.status === 200 && e.target.response) {

            const parseJson = JSON.parse(e.target.response)

          }

          // 设置状态为未上传状态

          _this.processStatus = false

        },

        error: function (e) {

          // 上传失败 应将文件通过File流读取出来进行回显 并展示给用户提示上传失败 请重新上传 或者自动重新上传

          _this.processStatus = false

        }

      })