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

### 上传进度回显，上传速度回显

### 源码如下，新建index.js装起来

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

####

####

END

####

####

转载于:https://www.cnblogs.com/fang-li/p/11242908.html