返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue+axios实现图片上传识别人脸的示例代码
  • 705
分享到

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

2024-04-02 19:04:59 705人浏览 八月长安
摘要

目录AxiOS请求 Qs处理数据分析 Vant上传文件格式 完整代码 本文主要介绍了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,/, '') 然后再传递到后端

完整代码


    <div id="app">
        <div style="display:flex;    
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;">
            <div>
              <van-uploader v-model="fileList" upload-text='人脸正面照' :max-count="1" :after-read="afterRead" ></van-uploader>
              <p style="text-align:center;font-size:15px;" v-if="data">学号/工号:{{data}}</p>
            </div>
          </div>
      </div>
 
  <script>
   var app = new Vue({
    el: '#app',
    data: {
      fileList: [],
      data:'',
    },
    methods:{
      afterRead(file) {
      //上传中,添加上传中的状态提示 status 为uploading
        file.status = 'uploading';
        file.message = '上传中...';
        var data = {
            code:this.$route.query.code,
            file:file.content
          }
        axios({
          method:'post',
          url:'app/face/upload',
          data:{
            code:GetRequest().code,
            file:file.content
          }
        }).then((res)=>{
        //请求返回,并且已经获取到成功的状态,设置上传成功的提示 status 为done
          if(res.data.code == 0){
            file.status = 'done';
            file.message = '';
            this.data = res.data.data.userNo
            this.$notify({ type: 'success', message: '上传成功' });
            
          //请求返回,接受到上传失败的提示 status为failed
          }else{
            file.status = 'failed';
            file.message = '上传失败';
           this.$notify({ type: 'warning', message: res.data.msg });
           this.data = ''
          }
        }).catch(()=>{
          file.status = 'failed';
          file.message = '上传失败';
          this.data = ''
        })
      },
    }
  })
  </script>

到此这篇关于vue+axios实现图片上传识别人脸的示例代码的文章就介绍到这了,更多相关vue axios图片上传识别人脸内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue+axios实现图片上传识别人脸的示例代码

本文链接: https://lsjlt.com/news/156852.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue+axios实现图片上传识别人脸的示例代码
    目录Axios请求 Qs处理数据分析 Vant上传文件格式 完整代码 本文主要介绍了vue+axios实现图片上传识别人脸的示例代码,分享给大家,具体如下: 先看最终效果: 这里采...
    99+
    2024-04-02
  • vue+axios怎么实现图片上传识别人脸
    本篇内容主要讲解“vue+axios怎么实现图片上传识别人脸”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue+axios怎么实现图片上传识别人脸”吧!先看最终效果:这里采用的是vant的文件...
    99+
    2023-06-25
  • python+opencv实现的简单人脸识别代码示例
    # 源码如下: #!/usr/bin/env python #coding=utf-8 import os from PIL import Image, ImageDraw import cv def...
    99+
    2022-06-04
    示例 代码 简单
  • JavaCV实现图片中人脸检测的示例代码
    目录前言一、javaCV是什么二、使用步骤1.引入库2.代码教程总结前言 今天微信群里聊天,群友问道有没有能让人脸露牙齿的接口,我记得想百度阿里的都应该有类似人脸识别,分析、融合的a...
    99+
    2022-11-13
    JavaCV图片人脸检测 JavaCV 人脸检测
  • python实现人脸识别代码
    从实时视频流中识别出人脸区域,从原理上看,其依然属于机器学习的领域之一,本质上与谷歌利用深度学习识别出猫没有什么区别。程序通过大量的人脸图片数据进行训练,利用数学算法建立建立可靠的人脸特征模型,如此即可识别...
    99+
    2022-06-04
    代码 python
  • Vue项目实现html5图片上传的示例代码
    目录图例1.选择图片2.预览图片2.1添加图片预览代码 两种方法的对比3.裁剪图片4.上传选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以...
    99+
    2024-04-02
  • Python三十行代码实现简单人脸识别的示例代码
    一、库介绍 opencv,face_recognition,numpy,以及dlib 注意: 安装opencv速度可能过慢,需要更换国内镜像源,参考:https://www.jb...
    99+
    2024-04-02
  • Java+OpenCV实现图片中的人脸识别
    目录MatOfRect.detectMultiScale函数实现代码ImageViewer.javaDetectFace.java运行把识别出来的脸存成文件经过前三个教程,我们可以知...
    99+
    2024-04-02
  • uniapp app 人脸识别的实现示例
    由于 小程序端 有camera组件 直接就可以调起摄像头 但是 app端是不支持这个标签的 所以只能用其他的方法 使用 nvue 中 live-pusher 组件 子组件&...
    99+
    2024-04-02
  • Python实现识别图像中人物的示例代码
    目录前言环境部署代码总结前言 接着上一篇:AI识别照片是谁,人脸识别face_recognition开源项目安装使用 根据项目提供的demo代码,调整了一下功能,自己写了一个识别人脸...
    99+
    2024-04-02
  • Golang实现图片上传功能的示例代码
    目录1.前端代码2.JS代码3.后端代码该代码为使用beego实现前后端图片上传。话不多说,直接上代码。 1.前端代码 html代码: <div class="col-5 f...
    99+
    2024-04-02
  • SpringMVC框架实现上传图片的示例代码
    一.创建图片虚拟目录在上传图片之前,先要设置虚拟目录(以IDEA为例) 打开工具栏的运行配置Edit Configurations 添加物理目录和并设置虚拟目录路径添加img图片在img文件夹内测试访问:http://localhost...
    99+
    2023-05-31
    spring mvc 上传
  • Springboot实现图片上传功能的示例代码
    首先对图片进行UUID 防止图片被覆盖以及爬图 UUID的生成规则:日期时间,MAC地址,HashCode,随机数(多种之一) 开发上传接口,两处红字意思是生成文件夹和生成目标文件,...
    99+
    2024-04-02
  • Vue实现自定义视频和图片上传的示例代码
    使用el-upload 上传视频总是报404错误,具体也不知道什么原因(如有知道的请评论告知,谢谢),去网上查了很多,代码写法确定是没有问题的,最后改为axios上传视频,...
    99+
    2023-05-17
    Vue视频 图片上传 Vue视频上传 Vue 图片上传
  • vue2+tracking实现PC端的人脸识别示例
    目录需求分析实现思路使用 tracking.js最后总是会有一些奇奇怪怪的需求无法避免。记录一下曾经项目遇到的一个需求。 需求 上传患者真实头像,可以有两种选择,一种是通过常规的文件...
    99+
    2024-04-02
  • Python实现识别图片为文字的示例代码
    目录1、环境准备2、业务实现3、效果展示本来想着做一个将图片识别为文字的小功能,本想到Google上面第一页全是各种收费平台的广告。 这些平台提供的基本都是让我们通过调用相关的三方接...
    99+
    2024-04-02
  • 怎么用Python代码实现人脸识别
    这篇文章主要介绍“怎么用Python代码实现人脸识别”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么用Python代码实现人脸识别”文章能帮助大家解决问题。正文:环境要求:Ubuntu17.10P...
    99+
    2023-06-29
  • Vue+Element+Springboot图片上传的实现示例
    最近没事刚好联系下vue+springboot前段后分离的项目、用上了图片上传功能、记录一下。 前端待提交的表单部分代码 <el-form-item label="封面图片...
    99+
    2024-04-02
  • 妙招:使用Python实现图片在人脸识别并显示
    导读本文介绍一下使用Python3实现识别图片中的所有人脸并显示出来,让我们一起来看一下。使用Python3实现识别图片中的所有人脸并显示出来,代码如下:# -*- coding: utf-8 -*-...
    99+
    2023-06-02
  • Java和OpenCV怎么实现图片中的人脸识别
    要在Java中实现人脸识别,可以使用OpenCV库。以下是一个基本的示例代码:```javaimport org.opencv.co...
    99+
    2023-08-18
    Java OpenCV
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作