目錄

• Axios請求
• Qs處理資料分析
  
• Vant上傳檔案格式
• 完整程式碼

本文主要介紹了+axios實現圖片上傳識別人臉的示例程式碼，分享給大家，具體如下：

先看最終效果：

這裡採用的是vant的檔案上傳元件，通過上傳圖片後端識別圖片裡的人臉，返回到前端，獲取該人臉匹配的工號或學號。以便後續其他系統使用，比如上傳成功了一個人臉照片識別成功，可以通過人臉開啟會議室的門禁。目前只是做了一個人臉上傳的效果。

Axios請求

使用axios請求資料，method：post時，dhttp://www.cppcns.comata預設的傳引數據型別是字串的型別，如需要傳遞on格式，需要引入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}}&
 
lt;/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.mwww.cppcns.comessage = '';
            this.data = res.data.data.userNo
            this.$notify({ type: 'success',message: '上傳成功' });
            
          //請求返回，接受到上傳失敗的提示 statuIDMBIAs為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圖片上傳識別人臉內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！