FormData 上传图片之身份认证

最新推荐文章于 2024-05-11 13:42:49 发布

文i

最新推荐文章于 2024-05-11 13:42:49 发布

阅读量899

点赞数

本文链接：https://blog.csdn.net/weixin_44955769/article/details/110075198

版权

这次遇到的问题是后端要求 FormData 上传，上传的是身份证正反面照片和姓名身份证号这些参数，这里我用到了 vant 的自定义上传，顺变给大家也分享下

看图

在这里插入图片描述

1、安装 vant

 Vue 2 项目，安装 Vant 2.x 版本：
	npm i vant -S

 Vue 3 项目，安装 Vant 3.x 版本：
	npm i vant@next -S

2、按需引入 vant 里的 Uploader 模块

import Vue from 'vue'
import { Uploader } from 'vant' // Uploader 模块
import 'vant/lib/Uploader/style' // vant 样式
Vue.use(Uploader)

3、HTML 代码如下这里我是用的 quasar 组件库

<q-card class="q-pa-md common-shadow text-center q-mt-lg">
    <div style="font-size:16px">请上传您的身份证人像面</div>
    <van-uploader v-model="fileList1" class="q-mt-md">
        <img v-show="!(fileList1 && fileList1.length)" src="../../assets/img/upLoader/reverse.png" alt="" style="width:200px">
    </van-uploader>
    <q-separator class="q-my-md"/>
    <div style="font-size:16px">请上传您的身份证国徽面</div>
    <van-uploader v-model="fileList2" class="q-mt-md">
        <img v-show="!(fileList2 && fileList2.length)" src="../../assets/img/upLoader/positive.png" alt="" style="width:200px">
    </van-uploader>
</q-card>

4、data 定一下两个数组用来双向绑定后身份证信息 file

	  username: '', // 真实姓名
      usercode: '', // 身份证号
      fileList1: [], // 上传1
      fileList2: [] // 上传2

5、下面开始使用 FormData 上传

 uploadFile () { // 上传事件
      return new Promise((resolve, reject) => {
        const formdata = new FormData()
        formdata.append('real_name', this.username)
        formdata.append('token', localStorage.getItem('token'))
        formdata.append('id_card', this.usercode)
        formdata.append('front_of_id_card', this.fileList1[0].file)
        formdata.append('reverse_of_id_card', this.fileList2[0].file)
        // 创建xhr，使用ajax进行文件上传
        const xhr = new XMLHttpRequest()
        xhr.open('post', `${ConfigBaseURL}api/personcenter/certification_post`)
        // 回调
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            const res = JSON.parse(xhr.responseText)
            if (res.state === '402') { // 这里根据自定义的状态码判断 ！！！！！！！！
              resolve(xhr.responseText)
              Vue.toasted.show(res.info, {
                duration: 2000,
                type: 'success'
              })
            } else {
              reject()
              Vue.toasted.show('提交失败', {
                duration: 2000,
                type: 'error'
              })
            }
          } else if (xhr.readyState === 4) {
            reject()
          }
        }
        // 上传成功 将数据清空
        this.username = '' // 上传成功 将数据清空
        this.usercode = '' // 上传成功 将数据清空
        this.fileList1 = [] // 上传成功 将数据清空
        this.fileList2 = [] // 上传成功 将数据清空
        // 将formdata上传
        xhr.send(formdata)
      })
    }