关键词：h5 FileReader、canvas压缩、多图片上传

一、前言

做过前端的同学都知道，图片上传是我们遇到的最常见的问题。网上不乏有很多封装好的组件，例如upload、webupload...以及一些直接可以用的ui组件。
根据应用场景，往往需要的是不同的展示效果或者功能需求。比如在移动端中上传图片，现在手机随便一拍都是4/5M以上，这样上传一是会浪费用户流量，二是图片过大时，尤其在网络不好的情况下，经常会遇到请求超时的情况而导致图片上传失败。
但是万变不离其宗，只要理解了上传图片的机制，什么都是得心应手的。接下来，我就要说一个利用h5 input type="file"属性做一个基于vue封装的多图片压缩上传的组件。

二、思路

（1）input type="file" 实现上传图片操作

<!-- accept属性仅适用于 <input type="file"> -->
<input  type="file" accept="image/*">

（2）利用FileReader读取图片
（3）判断图片大小，大的则用canvas进行压缩；图片信息用转为blob
注：图片较大时，在图片进行压缩后，我们要将他的图片信息转为blob二进制大数据进行保存。
（4）利用formData接受文件格式，传入后端

三、上代码

3.1html

我这里写的是一个限制上传的组件，最多只能上传9张图片。

image.png

    <div class="upload-wrap">
        /*  
          type="file" 以文件形式上传
          multiple 支持多选
          accept="image/*" 接受文件类型
        */
        <input @change.stop="fileChange($event)" type="file" ref="uploadFile" class="upload-input" multiple accept="image/*"/>
        <ul class="uplad-ul">
            <li class="upload-item" v-for="(item, index) in srcList" :key="index">
                <img :src="item" @error="handleLoadImgError">
                <i class="iconfont icon-closeimg" @click="deleteImg(index)"></i>
            </li>
            <li v-show="fileList.length < 9" class="upload-btn" @click="clickUploadBtn">
                <i class="iconfont icon-add"></i>
            </li>
        </ul>
     </div>

3.2js

  fileChange (e) {
      // 图片file
      let fileArr = e.srcElement.files
      for (let i = 0; i < fileArr.length; i++) {
        Indicator.open()
        //  FileReader读取图片
        let reader = new FileReader()
        reader.readAsDataURL(fileArr[i])
        // 注意这里this的指向
        reader.onloadend = (e) => {
          let result = e.target.result
          let img = new Image()
          img.src = result
          // 判断图片大小
          if (fileArr[i].size <= (200 * 1024)) {
            this.uploadImage(fileArr[i], img.src)
          } else {
            img.onload = () => {
              // 压缩图片
              let data = this.compress(img)
              // 将图片信息转为blob二进制
              let blob = this.dataURItoBlob(data)
              this.uploadImage(blob, img.src)
            }
          }
        }
      }
    }
  // 压缩图片
  compress (img) {
      //
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      canvas.width = img.width
      canvas.height = img.height
      ctx.fillStyle = '#fff'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(img, 0, 0, img.width, img.height)
      return canvas.toDataURL('image/jpeg', 0.1)
    },