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

简介: 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
    }

注:方法步骤一目了然,懂得自然懂。
看效果:
在这里插入图片描述

相关文章
|
15天前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
33 2
|
23天前
|
JavaScript Java 测试技术
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
21 0
|
23天前
|
JavaScript Java 测试技术
基于小程序的旅游出行必备商城小程序 +springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的旅游出行必备商城小程序 +springboot+vue.js附带文章和源代码说明文档ppt
24 1
|
23天前
|
JavaScript Java 测试技术
基于小程序的汽车保养系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的汽车保养系统+springboot+vue.js附带文章和源代码说明文档ppt
20 0
|
23天前
|
JavaScript Java 测试技术
基于小程序的童装商城+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的童装商城+springboot+vue.js附带文章和源代码说明文档ppt
22 0
|
23天前
|
JavaScript Java 测试技术
基于小程序的个人行政复议在线预约系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的个人行政复议在线预约系统+springboot+vue.js附带文章和源代码说明文档ppt
25 0
|
23天前
|
JavaScript Java 测试技术
微信点餐小程序+springboot+vue.js附带文章和源代码说明文档ppt
微信点餐小程序+springboot+vue.js附带文章和源代码说明文档ppt
17 0
|
23天前
|
JavaScript Java 测试技术
基于小程序的订餐系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的订餐系统+springboot+vue.js附带文章和源代码说明文档ppt
20 0
基于小程序的订餐系统+springboot+vue.js附带文章和源代码说明文档ppt
|
23天前
|
JavaScript Java 测试技术
基于小程序的教师管理系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的教师管理系统+springboot+vue.js附带文章和源代码说明文档ppt
16 0
|
23天前
|
JavaScript Java 测试技术
基于小程序的实习记录小程序+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的实习记录小程序+springboot+vue.js附带文章和源代码说明文档ppt
19 0