按钮中多文件上传功能，可集成到vue中

总共两个函数，一个是添加dom，实现点击选择文件，第二个就是压缩，我里面的判断是当图片大于512k时才会压缩，并且是多文件的上传

function clickEvent() {
       let file = document.createElement('input')
       file.setAttribute('type', 'file')
       file.setAttribute('multiple', 'multiple')
       file.setAttribute(
           'accept',
           'image/jpeg,image/png,image/jpg'
       )
       file.style.display = 'none'
       document.querySelector('body').appendChild(file)
       file.addEventListener('change', async () => {
         let param = new FormData()
         let fileList = file.files || []
         for (let p = 0; p < fileList.length; p++) {
           let ele = fileList[p] || {}
           if (ele.size > 512 * 1024) {
           try {
             const f = await compressFile(ele)
             if (f.code === 200) {
               ele = f.data || {}
             }
             } catch (e) {
               console.log(e)
               continue
             }
         }
         param.append(`resource${p}`, ele, ele.name)
         }
         // This.uploadImage(param, file) 用于上传 方法不写了
         // 记得在上传文件完成添加以下代码，防止过多的插入input
         // delete fileDom.parentNode.removeChild(fileDom)
         })
         file.click()   
}

// 压缩图片方法，核心函数
function compressFile (file) {
      return new Promise(function (resolve, reject) {
        const fileObj = file
        const reader = new FileReader()
        reader.readAsDataURL(fileObj) // 转base64
        reader.onload = function (e) {
          const image = new Image() // 新建一个img标签（还没嵌入DOM节点)
          image.src = e.target.result
          image.onload = function () {
            const canvas = document.createElement('canvas') // 新建canvas
            const context = canvas.getContext('2d')
            let imageWidth = image.width // 压缩后图片高度和宽度
            let imageHeight = image.height
            if (imageWidth > 1080) {
              imageWidth = 1080
              imageHeight = (imageWidth * image.height) / image.width
            }
            let data = ''
            canvas.width = imageWidth
            canvas.height = imageHeight
            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/jpeg', 0.6) // 压缩至以前的0.6倍
            const arr = data.split(',')
            const mime = arr[0].match(/:(.*?);/)[1] // 转成blob
            const bstr = atob(arr[1])
            let n = bstr.length
            const u8arr = new Uint8Array(n)
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            const name = file.name.substr(0, file.name.lastIndexOf('.'))
            const files = new window.File([new Blob([u8arr], { type: mime })], `${name}.jpeg`, { type: 'image/jpeg' }) // 转成file
            resolve({ data: files, code: 200 })
          }
        }
      })
    }