封装上传文件图片的请求

原生 XMLHttpRequest

// 上传文件
export const promiseFile = (url, formData, token) => {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    if(token!==false&&token){
      xhr.setRequestHeader('Authorization',token.value)
    }
    xhr.send(formData);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          resolve(JSON.parse(xhr.response))
        } else {
          reject(JSON.parse(xhr.response))
        }
      }
    }
  })
}
 

引用

export const uploadImg = (formData) => {
  let url = `${API_PATH}/liz-qywechat-basis/file/upload`
  return AuthProvider.getAccessToken().then(token => {
    return promiseFile(url, formData, { value: token } );
  })
}

clickHandle = () => {
    let fileContainer = document.createElement("input")
    fileContainer.type = 'file';
    fileContainer.onchange = (e) => {
        this.uploadEvent(e.target.files[0], e.target.value)
    }
    fileContainer.click()
}
uploadEvent = (file, value) => {
    const index = value.lastIndexOf('.')
    const finalName = value.substr(index + 1)
    const format = this.props.limitFormat
    const size = file.size
    const formData = new FormData()
    formData.append('file', file)
    if (!format.includes(finalName.toLowerCase())) {
        // 格式错误或大小超过限制
        sendEvent('message', { txt: '格式错误！', code: 1004 })
        return
    }
    if (size > this.props.limitSize) {
        // 格式错误或大小超过限制
        sendEvent('message', { txt: '大小超过限制！', code: 1004 })
        return
    }
    this.getImageSize(file, (w, h, data) => {
        this.setState({ imgUrl: data })
        this.successHandle(formData).then(res => {
            this.props.onChange(res)
        })
    })
}
successHandle = (formData) => {
    const self = this
    const url = API_PATH + this.props.uploadUrl
    this.startLoading()
    return promiseFile(url, formData)
        .then(res => {
            this.endLoading()
            if (self.props.clear) {
                console.log(11)
                this.setState({
                    imgUrl: ''
                })
            }
            return res
        })
}

ajax

import $ from 'jquery'
const promiseFile = (url,token,formData) => {

    return  new Promise((resolve, reject) => {
      $.ajax({
       url: url,
       type: 'POST',
       cache: false,
       data: formData,
       processData: false,
       contentType: false,
       beforeSend: function(request){
         request.setRequestHeader('Authorization', 'Bearer '+token);
       },
     success:function(res){
     resolve(res)
    },fail:function(error){
     reject(error)
     }})
    })
}

export default promiseFile