element ui 的 el-upload上传功能记录

auto-upload为false的时候 before-upload和http-request 是无效的

可以使用 on-change 方法 限制文件的大小和格式

html

<el-upload class="avatar-uploader" action="" list-type="picture-card" :limit="5" :auto-upload="false" :file-list="fileList" :on-change="handleChange" :on-remove="handleRemove" :class="{ hide: hideUploadEdit }">

<i class="el-icon-plus"></i>

<div slot="tip" class="el-upload__tip">

限上传png、jpg、jepg格式的图片，大小不超过5M，最多上传5张

</div>

</el-upload>

js

handleChange(file, fileList) {
      //图片格式限制
      const isJPG = file.raw.type === 'image/jpeg';
      const isPNG = file.raw.type === 'image/png';
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 png、jpg、jepg 格式!');
        fileList.splice(-1, 1);  // 图片不在列表显示
        return
      }

      // 图片大小的限制
      const isLt5M = file.raw.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过5MB!');
        fileList.splice(-1, 1); 
        return
      }

      uploadImg(file.raw).then(res => {
        this.imgList.push(res)
        this.fileList = JSON.parse(JSON.stringify(fileList))
        this.hideUploadEdit = this.fileList.length >= 5
        this.form.imgUrl = this.imgList.join(',')
      }).catch(err => {
        fileList.splice(-1, 1);
      })
},