vue+axios实现图片上传识别人脸代码示例

本篇文章小编给大家分享一下vue+axios实现图片上传识别人脸代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

具体如下：

先看最终效果：

这里采用的是vant的文件上传组件，通过上传图片后端识别图片里的人脸，返回到前端，获取该人脸匹配的工号或学号。以便后续其他系统使用，比如上传成功了一个人脸照片识别成功，可以通过人脸开启会议室的门禁。目前只是做了一个人脸上传的效果。

Axios请求

使用axios请求数据，method：post时，data默认的传参数据类型是字符串的类型，如需要传递json格式，需要引入qs.js，看后端接受的类型而定。

Qs处理数据分析

首先qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.
地址: www.npmjs.com/package/qs

qs.parse()、qs.stringify()

qs.parse()将URL解析成对象的形式

qs.stringify()将对象 序列化成URL的形式，以&进行拼接

以下，是在实际项目中的使用方式：

 var data = {
    code:GetRequest().code,
    file:file.content
}
axios({
   method:'post',
   url:'/app/face/upload',
  data:qs.stringify(data)
})

Vant上传文件格式

上传文件，这里需要注意点就是传递到后端需要的格式，可以是文件流，也可以是base64，尽管两种类型，vant都已经帮我们处理过了，文件流，我们也想可以直接使用formData直接传给后端，base64有些后端他需要我们自己处理过滤掉这里我们需要使用正则fileList[0].content.replace(/^data:image/w+;base64,/, '') 然后再传递到后端

完整代码

    

        

            

              
              
学号/工号：{{data}}