FormData 上传图片之身份认证

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

看图

1、安装 vant

 Vue 2 项目，安装 Vant 2.x 版本：npm i vant -SVue 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: [], // 上传1fileList2: [] // 上传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)})}

6、再见好用别忘了收藏点赞

FormData 上传图片之身份认证相关推荐

vue3+nodejs基于RSA加密的身份认证（token的组成及使用）
nodejs学习 1.express & nodejs & mysql 新建项目 2.nodejs尝试登陆接口 3.nodejs的前端项目搭建以及登陆接口开发 4.前端上传图片form ...
python的requests快速上手、高级用法和身份认证
https://blog.csdn.net/qq_25134989/article/details/78800209 快速上手迫不及待了吗?本页内容为如何入门 Requests 提供了很好的指引.其 ...
node.js学习总结：node.js的内置模块，模块化，npm与包 express，前后端身份认证 JWT认证机制
node.js学习总结什么是node.js node.js的内置模块 fs系统模块 path路径模块 http模块模块化 npm与包 express express路由 express+mysql ...
Shiro01 功能点框图、架构图、身份认证逻辑、身份认证代码实现
基本功能点功能点框图功能点说明 1.Authentication:身份认证/登录,验证用户是不是拥有相应的身份: 2.Authorization:授权,即权限验证,验证某个已认证的用户是否拥有某个 ...
配置用户通过Telnet登录设备的身份认证（AAA本地认证）
背景信息用户通过Telnet登录设备时,设备上必须配置验证方式,否则用户无法成功登录设备.设备支持不认证.密码认证和AAA认证三种用户界面的验证方式,其中AAA认证方式安全性最高. 采用AAA本地认 ...
Delphi实现WebService带身份认证的数据传输
WebService使得不同开发工具开发出来的程序可以在网络连通的环境下相互通信,它最大的特点就是标准化(基于XML的一系列标准)带来的跨平台.跨开发工具的通用性,基于HTTP带来的畅通无阻的能力(跨 ...
生物识别最新进展：动态密码语音无监督身份认证系统通过科技成果鉴定
近日,由中国电子学会主持召开的"基于动态密码语音的无监督身份认证系统"科技成果鉴定会在清华大学举办,AI科技大本营受邀出席. 该成果由清华大学.北京得意音通技术有限责任公司共同完成 ...
labview的用户身份认证系统设计_elasticsearch 集群身份认证与用户鉴权
elasticsearch在默认安装后,没有提供任何安全保护. 在elasticsearch.yml配置了server.host=0.0.0.0导致公网可以访问es集群. 数据安全的基本需求: 1.身 ...
干货 | 清华大学郑方：语音技术用于身份认证的理论与实践
本讲座选自清华大学语音和语言技术中心主任郑方教授近期于清华大数据"技术·前沿"系列讲座上所做的题为<语音技术用于身份认证的理论与实践>的演讲. 以下为演讲的主要内容: ...

FormData 上传图片之身份认证

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

看图

FormData 上传图片之身份认证相关推荐

最新文章

热门文章