VUE element-ui之上传身份证照片正反面详细代码

步骤：

定义上传组件：

<el-col :lg="6">
   <el-upload
     class="avatar-uploader"
     action="#"
     :auto-upload="false"
     :show-file-list="false"
     :on-change="changePictureUploadIDFront">
	 <img v-if="imageUrlFront" :src="imageUrlFront" class="avatar">
	 <i v-else class="el-icon-plus avatar-uploader-icon" />
	</el-upload>
	<div class="el-upload__tip">身份证正面</div>
</el-col>
data() {
          
   
	retrun {
          
   
		imageUrlFront: 
	}
}

定义方法：

// 文件发生变化时
    changePictureUploadIDFront(file, fileList) {
          
   
      console.log(`------`, file)
      const isJPG = file.raw.type === image/jpeg
      const isPNG = file.raw.type === image/png
      const isLt2M = file.raw.size / 1024 / 1024 < 2

      if (file.raw) {
          
   
        if (isJPG || isPNG) {
          
   
          const fileFormData = new FormData()
          fileFormData.append(files, file.raw)
          addIdCard(fileFormData).then(res => {
          
    //调用上传接口
            if (res) {
          
   
              this.imageUrlFront = URL.createObjectURL(file.raw)//接口调用成功后赋值src
              this.$message({
          
   
                message: 恭喜你，上传成功！,
                type: success
              })
            }
          })
          this.imageUrlFront = URL.createObjectURL(file.raw)
        } else {
          
   
          this.$message.error(上传图片只能是 JPG或PNG 格式!)
        }
      }

      if (!isLt2M) {
          
   
        this.$message.error(上传图片大小不能超过 2MB!)
      }
      // 返回图是jpg或png格式并且大小不超过2MB
      return (isJPG || isPNG) && isLt2M
    }

注：方法步骤一目了然，懂得自然懂。 看效果：