记录关于图片点击多张上传的问题

/**
 * description: 腾讯云上传文件
 */
import { app } from '@/config/env'
import Vue from 'vue'
import { Message, Loading } from 'element-ui'

/* eslint-disable */
/**
 * imageView2/w/300/q/60
 */
const region = 'gz';
const filterImg = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'];
const filter = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
const UploadFileByTXY = {
  imgFile: null,
  verifyBase64: null,
  path: '/szajimgs/',
  imgURLdomain: app.domain,
  upload: function ({ id, callback, type, maxSize }, clip=false) {
    if(!id) return;
    let self = this,
    el = document.getElementById(id),
    file = null,
    size = null,
    fileName = null,
    fileType = null;
    let loading = null;
    // 监听file元素改变事件
    el.addEventListener('change',function (e) {
      let date = new Date().getTime() + (Math.random() * 1000000).toFixed(0);
      file = this.files[0];
      self.imgFile = file;
      if(!file) return false
      size = file.size;
      fileName = date + '.' + file.name.substr(file.name.lastIndexOf('.') + 1)
      fileType = file.type;
      if (!type && filterImg.indexOf(fileType) < 0) {
        let docTip = '上传支持jpg,png等格式文件上传';
        el.value = '';
        alert(docTip);
        return;
      }
      if (type === 'doc') {
        self.path = '/doc/'
      } else {
        self.path = '/szajimgs/'
      }
      console.log(self.path)
      console.log(fileType)
      if (type === 'doc' && filter.indexOf(fileType) < 0) {
        let docTip = '上传支持jpg,png,doc等格式文件上传';
        el.value = '';
        alert(docTip);
        return;
      }
      //过滤文件大小
      console.log(size)
      if (maxSize) {
        if (size >= 1024*1024*maxSize) {
          Vue.prototype.$alert(`文件大小不超过${maxSize}M`, '上传文件错误')
          el.value = ''
          return
        }
      }
 
      if (!type && window.FileReader) {
      var fr = new FileReader();
        fr.onload = function(e) {
          var imgBase64 = e.target.result;
          self.verifyBase64 = imgBase64;
          let canvasImg = self.compressImg(imgBase64, size, fileType, self.convertBase64UrlToBlob, uploadImg);
        }
        fr.readAsDataURL(file);
      }
      console.log('fff')
      let c = ''
      let canvasPopup = ''
      let uploadImg = () => {
        Vue.Post('xxxxxxxxx', {
            cosPath: self.path + fileName,
            ...app
          }).then(json => {
          if (json.code === '0000') { // 请求成功
            let sign = json.data.sign
            // 实例化 cos
            let cos = new CosCloud({
              appid: app.appid,
              bucket: app.bucket,
              region: region,
              getAppSign: function (callback) {
                callback(sign)
              },
              getAppSignOnce: function (callback) {
                callback(sign)
              }
            })
            // 图片上传
            cos.uploadFile(successCallBack, errorCallBack, progressCallBack, app.bucket, self.path + fileName, self.imgFile, 1);
          } else { // 请求失败
            alert('获取文件上传签名失败！')
          }
        })
      }
      if (type === 'doc') {
        loading = Loading.service({ fullscreen: true, text: `正在上传` });
        uploadImg()
      }
    })

    // 上传成功回调
    let successCallBack = (result) => {
      /*
        data.access_url 生成的文件CDN下载url
        data.source_url 生成的文件COS源站url
        data.url 操作文件的url
        data.resource_path 资源路径. 格式:/appid/bucket/xxx
      */
      if (result.code === 0) {
        let obj = {};
        let data = result.data;
        obj.verifyBase64 = this.verifyBase64;
        obj.url = app.domain + this.path + fileName;
        if (type === 'doc') {
          obj.url = data.source_url
        }
        obj.fileName = fileName;
        typeof callback === 'function' && callback(obj);
      } else {
        alert('上传失败');
      }
      loading.close()
    }

    // 上传失败回调
    let errorCallBack = (result = {}) => {
      loading.close()
      alert(JSON.stringify(result))
      alert('上传失败！请尝试在稳定网络环境上传！');
    }

    // 上传过程中回调
    let progressCallBack = (curr) => {
      // loading.text = `上传中: ${(curr * 100).toFixed(2)}%`
    }
  },
  multiUpload: function ({ id, callback, upLoadOver, maxSize}) {
    if(!id) return;
    let el = document.getElementById(id);
    let filess = '';
    let self = this;
    let path = '/szajimgs/';
    self.path = '/szajimgs/';
    let fileName = '';
    let fileType = '';
    let loading = null;
    let date = new Date().getTime();
    let fileNum = 0, upOrder = 0, files = null;
    const imgFilter = ['image/jpeg', 'image/png', 'image/gif']
    // 监听file元素改变事件
    el.addEventListener('change',function (e) {
      self.path = '/szajimgs/';
      files = this.files;
      if (files && files.length < 1) return false
      upOrder = 0
      fileNum = files.length
      if (fileNum > 20) {
        Message({
          showClose: true,
          message: '每次最多同时上传20张图片！',
          type: 'error'
        });
        return false
      }
      for (var i = files.length - 1; i >= 0; i--) {
        if (imgFilter.indexOf(files[i].type) < 0) {
          el.value = '';
          Message({
            showClose: true,
            message: '仅支持JPEG、PNG图片文件格式上传',
            type: 'error'
          });
          return false;
        }
        //过滤文件大小
        if (maxSize) {
          if (files[i].size >= 1024*1024*maxSize) {
            Vue.prototype.$alert(`文件大小不超过${maxSize}M`, '上传文件错误')
            el.value = ''
            return
          }
        }
      }
      loading = Loading.service({ fullscreen: true, text: `正在上传第 ${upOrder + 1} 张图片: 0%`});
      uploadImg();
    })
      // 批量上传图片
    const uploadImg = function () {
      if (upOrder === 0) {
        filess = Array.from(el.files)  //  第二次调用被莫名清空 第一次进入用数组的方式监听方法内全局保存下来 
      }
      let file = filess[upOrder];
      date = new Date().getTime();
      fileName = date + '.' + file.name.substr(file.name.lastIndexOf('.') + 1)
      fileType = file.type;
      // axiosPost(getUploadSign, { cosPath: path + fileName }).then(json => {
      Vue.Post('xxxxxxxx', {
          cosPath: self.path + fileName,
          ...app
        }).then(json => {
        if (json.code === '0000') { // 请求成功
          let sign = json.data.sign
          // 实例化 cos
          let cos = new CosCloud({
            appid: app.appid,
            bucket: app.bucket,
            region: region,
            getAppSign: function (callback) {
              callback(sign)
            },
            getAppSignOnce: function (callback) {
              callback(sign)
            }
          })
            // 批量上传图片成功回调
          const successCallBack = (result) => {
            if (result.code === 0) {
              let upImgPath = app.domain + '/szajimgs/' + fileName;
              typeof callback === 'function' && callback(upImgPath);
              goNext()
            } else {
              console.error(`第 ${upOrder} 张图片上传失败`)
              Message({
                showClose: true,
                message: `第 ${upOrder} 张图片上传失败`,
                type: 'error'
              });
            }
          }
          // 批量上传图片过程中回调
          const progressCallBack = (curr) => {
            loading.text = `正在上传第 ${upOrder+1} 张图片: ${(curr * 100).toFixed(2)}%`
          }
          // 批量上传图片失败回调
          const errorCallBack = (result = {}) => {
            goNext()
          }
          const goNext = () => {
            upOrder++
            if (upOrder < fileNum) {
              uploadImg()
            } else {
              loading.close()
              typeof upLoadOver === 'function' && upLoadOver();
            }
          }
          // 图片上传
          cos.uploadFile(successCallBack, errorCallBack, progressCallBack, app.bucket, path + fileName, file, 1);
        } else { // 请求失败
          console.log('获取文件上传签名失败！')
          Message({
            showClose: true,
            message: `获取文件上传签名失败！`,
            type: 'error'
          });
        }
      })
    }
  },
  compressImg: function(imgBase64, size, fileType, buildFile, uploadImg, maxHeight = 600, quality = 0.7){
    if(!imgBase64) return;
    let self = this
    let img = document.createElement('img');
    img.src = imgBase64;
    img.onload = function(){
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        //压缩率设置
        let s = size / 1024;
        if(s < 50){
          maxHeight = img.height;
        }else if(s >= 50 && s < 500){
          maxHeight = 600;
        }else if(s >= 500 && s < 1024){
          maxHeight = 450;
        }else if(s >= 1024 && s < 2*1024){
          maxHeight = 450;
        } else if(s >= 2*1024 && s < 3*1024) {
          maxHeight = 450;
        } else{
          maxHeight = 600;
        }
        if(img.height > maxHeight) {//按最大高度等比缩放
        img.width *= maxHeight / img.height;
        img.height = maxHeight;
      }
        // canvas drawImage 参数
        let sx = 0;
        let sy = 0;
        let sWidth = img.width;
        let sHeight = img.height;
        canvas.width = img.width;
        canvas.height = img.height;

        // canvas清屏
        context.clearRect(0, 0, canvas.width, canvas.height)
        context.drawImage(img, sx, sy, sWidth, sHeight)
        let imgBase64 = canvas.toDataURL('image/jpeg', quality)
        buildFile && (self.imgFile = buildFile(imgBase64, fileType))
        uploadImg && uploadImg()
        return imgBase64
    }
  },
  convertBase64UrlToBlob: function (imgBase64, fileType){
    var bytes=window.atob(imgBase64.split(',')[1]) // 去掉url的头，并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob( [ab] , {fileType});
  }
}

export default UploadFileByTXY;

/* eslint-enable */