记录一次图片上传流程

需求说明：

1. 将图片大小限制在2M以内，

2. 将图片尺寸限制在690PX以内，

3  将图片格式限制在PNG,JPEG,JPG三种格式，// accept=".jpg, .jpeg, .png"

4. 将图片限制在8张以内  // :limit="8"

第三方ui：elementUI,

框架语言：VUE2.6

注意：其他框架或者JS方法类似

template部分：

　　　　　　　　<el-upload
                :class="['upload-demo',fromData.invoiceFiles.length >= 8?'disUpload':'']"
                :show-file-list="false"
                :file-list="fromData.invoiceFilesList"
                :limit="8"
                ref="upload"
                :disabled="fromData.invoiceFiles.length >= 8"
                :on-success="handleSuccess"
                :on-change="changeHandler"
                accept=".jpg, .jpeg, .png"
                :before-upload="beforeUpload"
                :action="你的服务器地址"
                multiple>
                <i class="el-icon-plus avatar-uploader-icon">点击上传</i>
              </el-upload>

js部分：

    changeHandler(file){
        this.asyncImgChecked(file).then(data => {
          if (data) {
　　　　　　　　this.$refs.upload.clearFiles()
            　this.$message.error('图片尺寸不小于690 X 690')
          }
        })
      },

      // 计算图片尺寸
      asyncImgChecked (file) {
        return new Promise((resolve) => {
          let reader = new FileReader()
          reader.readAsDataURL(file.raw) // 必须用file.raw
          reader.onload = () => { // 让页面中的img标签的src指向读取的路径
            let img = new Image()
            img.src = reader.result
            // console.log(`1当前文件尺寸大小：${img.width}×${img.height}`)
            if (img.complete) { // 如果存在浏览器缓存中
              if (img.width < 690 || img.height < 690) {
                resolve(false)
              } else {
                resolve(true)
              }
            } else {
              img.onload = () => {
                if (img.width < 690 || img.height < 690) {
                  resolve(false)
                } else {
                  resolve(true)
                }
              }
            }
          }
        })
      },
　　　　
      beforeUpload(file) {
　　　　　//图片做上传之前限制大小 因为size:是字节单位
        if(file.size > 1024*1024*2){
          this.$message.error('图片大小不能大于2M');
          return false
        }
　　　　　//图片做上传之前限制格式　
        if(file.type == 'image/png' || file.type == 'image/jpeg'){}
        else{
          this.$message.error('请上传png/jpg格式图片');
          return false
        }
      },