vue+element UI (el-upload) 组件上传使用记录

需求说明：

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)
            }
          }
        }
      }
    })
},

//这一步也可以放到changeHandler函数中做
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
    }
},