vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉的示例代碼

更新時(shí)間：2021年11月09日 15:00:45 作者：5加H

本文主要介紹了vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉，這里采用的是vant的文件上傳組件，通過(guò)上傳圖片后端識(shí)別圖片里的人臉，感興趣的可以了解一下

這里采用的是vant的文件上傳組件，通過(guò)上傳圖片后端識(shí)別圖片里的人臉，返回到前端，獲取該人臉匹配的工號(hào)或?qū)W號(hào)。以便后續(xù)其他系統(tǒng)使用，比如上傳成功了一個(gè)人臉照片識(shí)別成功，可以通過(guò)人臉開(kāi)啟會(huì)議室的門(mén)禁。目前只是做了一個(gè)人臉上傳的效果。

Axios請(qǐng)求

使用axios請(qǐng)求數(shù)據(jù)，method：post時(shí)，data默認(rèn)的傳參數(shù)據(jù)類(lèi)型是字符串的類(lèi)型，如需要傳遞json格式，需要引入qs.js，看后端接受的類(lèi)型而定。

Qs處理數(shù)據(jù)分析

首先qs是一個(gè)npm倉(cāng)庫(kù)所管理的包,可通過(guò)npm install qs命令進(jìn)行安裝.
地址: www.npmjs.com/package/qs

qs.parse()、qs.stringify()

qs.parse()將URL解析成對(duì)象的形式
qs.stringify()將對(duì)象序列化成URL的形式，以&進(jìn)行拼接

以下，是在實(shí)際項(xiàng)目中的使用方式：

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

Vant上傳文件格式

上傳文件，這里需要注意點(diǎn)就是傳遞到后端需要的格式，可以是文件流，也可以是base64，盡管兩種類(lèi)型，vant都已經(jīng)幫我們處理過(guò)了，文件流，我們也想可以直接使用formData直接傳給后端，base64有些后端他需要我們自己處理過(guò)濾掉這里我們需要使用正則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">學(xué)號(hào)/工號(hào)：{{data}}</p>
            </div>
          </div>
      </div>
 
  <script>
   var app = new Vue({
    el: '#app',
    data: {
      fileList: [],
      data:'',
    },
    methods:{
      afterRead(file) {
      //上傳中，添加上傳中的狀態(tài)提示 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)=>{
        //請(qǐng)求返回，并且已經(jīng)獲取到成功的狀態(tài)，設(shè)置上傳成功的提示 status 為done
          if(res.data.code == 0){
            file.status = 'done';
            file.message = '';
            this.data = res.data.data.userNo
            this.$notify({ type: 'success', message: '上傳成功' });
            
          //請(qǐng)求返回，接受到上傳失敗的提示 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>

到此這篇關(guān)于vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉的示例代碼的文章就介紹到這了,更多相關(guān)vue axios圖片上傳識(shí)別人臉內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: