elementUI el-upload的http-request的使用记录

• 先说一下为什么想要使用这个http-request方法：
  1. 项目是用elementUI库，需求在没有提出以前用的是el-upload实现的上传功能
  2. 之前的上传限制啥的在以前的功能上已经写好了也不好在进行修改
• 查看文档发现：
  个人理解就是我把参数配置传给你，你想咋实现自己来
• 首先是页面组件配置：

...
<el-upload
  class="upload"
  ref="upload"
  :http-request="customUpload"
  :headers="upload.headers"
  :action="upload.url"
  :disabled="upload.isUploading"
  multiple
  :show-file-list="false"
  :file-list="fileList"
  :data="upload.data"
  :before-upload="handleBeforeUpload"
  :on-success="handleUploadSuccess"
  :on-progress="handleProgress"
>
...
//js部分
...
customUpload(option){
	  // 创建formData对象
      var formData = new FormData();
      // 插入你想要传递的参数
      formData.append("file", option.file);
      formData.append("menuId", option.data.menuId);
      // 接口调用 原生方法
      let xml = new XMLHttpRequest();
      // 选择上传的请求方式 上传的地址 是否开启异步上传
      xml.open('POST', option.action, true) // 第三个值指定接口是否异步
      // 上传的请求头配置 token添加
      xml.setRequestHeader('Authorization', option.headers.Authorization);
      // 要用的参数存入option中
      option.xml = xml
      option.status = 'notStart'
      option.fileName = option.file.name
      option.progress = 0
      option.formData = formData
      option.uuid = nanoid()
      this.$store.dispatch('materialupload/setUploadList',option)
    },
...

• 因为要切换页面也要保留上传列表 所以把相关的上传功能放到vuex中进行

// materialupload.js

const state = {
  // 上传列表
  uploadList: [],
  // 正在上传文件id列表
  statusList:[],
  // 同时上传数量
  limit: 3
}
// 判断锁 是否为最后一条
let flag = true
const mutations = {
  // 添加上传列表
  SET_UPLOADLIST: (state, options) => {
    // 开启判断锁
    flag = true
    state.uploadList.push(options)
  },
  // 添加正在上传id列表
  SET_STATUSLIST: (state, uuid) => {
    // 判断正在上传的列表的长度是不是大于或者等于规定的同时上传数量 是：删除第一条
    if(state.statusList.length>=state.limit){
      state.statusList.shift()
    }
    state.statusList.push(uuid)
  },

}
const actions = {
  // 开启上传
  setUploadList: ({ commit, state }, options) => {
    commit('SET_UPLOADLIST', options)
    if(state.statusList.length<state.limit){
      commit('SET_STATUSLIST', options.uuid)
      uploadData(options)
    }
  },
  // 重新上传失败的文件
  refreshUploadData: ({ commit,state }, uuid) => {
    // 获取失败文件的位置
    let errorIndex = state.uploadList.findIndex(v=>v.uuid==uuid)
    // 获取失败的文件
    const obj = state.uploadList.splice(errorIndex,1)[0]
    // 重新给xml赋值
    obj.xml.open('POST', obj.action, true)
    obj.xml.setRequestHeader('Authorization', obj.headers.Authorization);
    // 修改上传的状态
    obj.status = 'notStart'
    // 加入上传列队末尾
    state.uploadList.push(obj)
    if(state.statusList.length<state.limit){
      commit('SET_STATUSLIST', obj.uuid)
      uploadData(obj)
    }
  },
  // 删除功能
  deleteUploadDate:({state}, uuid) => {
    // 判断是否为正在上传的文件
    let statusIndex = state.statusList.indexOf(uuid)
    // 获取要删除的文件在列队中的位置
    let deleteIndex = state.uploadList.findIndex(v=>v.uuid==uuid)
    if(statusIndex>-1){// true
      // 删除停止正在上传的文件
      state.uploadList[deleteIndex].xml.abort()
      // 在上传列队中删除该文件
      state.uploadList.splice(deleteIndex,1)
      // 判断是否为最后一条上传的文件
      let lastuuid = state.uploadList[state.uploadList.length-1].uuid
      if(lastuuid==uuid) flag = false
      // 是的话禁止继续上传 
      if(state.statusList.length>0&&flag){
        // 获取目前上传的文件位置
        let speed = state.uploadList.findIndex(v=>v.uuid==state.statusList[state.statusList.length-1])
        // 开启下一个文件上传
        if(speed<(state.uploadList.length-1)){
          state.statusList.push(state.uploadList[speed+1].uuid)
          uploadData(state.uploadList[speed+1])
        }
      }
      // 删除上传成功的id列
      state.statusList.splice(statusIndex,1)
    }else{
      // 直接删除上传文件
      state.uploadList.splice(deleteIndex,1)
    }
  },
  // 删除所有
  deleteAllUploadData: ({state}) => {
    // 判断是否有正在上传的文件
    state.statusList.forEach(v=>{
      let deleteIndex = state.uploadList.findIndex(m=>m.uuid==v)
      // 终止上传
      state.uploadList[deleteIndex].xml.abort()
    })
    state.statusList = []
    state.uploadList = []
  }
}
// 主体上传函数
function uploadData(option) {
  // 监控上传进度
  option.xml.upload.onprogress = (e) => {
    option.progress = (e.loaded / e.total * 100).toFixed(0)
    option.status = 'loading'
  }
  // 接口调用成功回调
  option.xml.onload = (e) => {
    const response = JSON.parse(e.currentTarget.response)
    if(response.code==200){
      option.status = 'success'
    }else{
      option.status = 'error'
    }
    // 与删除功能逻辑相同
    let lastuuid = state.uploadList[state.uploadList.length-1].uuid
    if(lastuuid==option.uuid) flag = false
    if(state.statusList.length>0&&flag){
      let speed = state.uploadList.findIndex(v=>v.uuid==state.statusList[state.statusList.length-1])
      if(speed<(state.uploadList.length-1)){
        state.statusList.push(state.uploadList[speed+1].uuid)
        uploadData(state.uploadList[speed+1])
      }
    }
    state.statusList.splice(state.statusList.indexOf(option.uuid),1)
  }
  // 接口调用失败处理
  option.xml.onerror = (e) => {
    option.status = 'error'
    // 与删除功能逻辑相同
    let lastuuid = state.uploadList[state.uploadList.length-1].uuid
    if(lastuuid==option.uuid) flag = false
    if(state.statusList.length>0&&flag){
      let speed = state.uploadList.findIndex(v=>v.uuid==state.statusList[state.statusList.length-1])
      if(speed<(state.uploadList.length-1)){
        state.statusList.push(state.uploadList[speed+1].uuid)
        uploadData(state.uploadList[speed+1])
      }
    }
    state.statusList.splice(state.statusList.indexOf(option.uuid),1)
  }
  // 上传到后台
  option.xml.send(option.formData);
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

• 总结一下 ：主要功能就是 文件上传包括（还有就是按顺序上传列表以及上传失败后重新上传等功能），文件删除 包括（上传完成删除，上传中删除 未上传删除 和 上传失败删除以及上传列表的清空）