Vue+axios sample code for uploading pictures and recognizing faces

This article mainly introduces the sample code of vue+axios to realize face recognition by uploading pictures, and shares it with you, as follows:

Let’s take a look at the final effect first:

The file upload component of Vant is used here. The backend recognizes the face in the uploaded picture, returns it to the front end, and obtains the work number or student number that matches the face. This will allow other systems to use it later. For example, if a facial photo is successfully uploaded and recognized, the conference room access can be opened by face. Currently, we have only done the effect of uploading a person’s face.

Axios Request

When using axios to request data with method: post, the default parameter data type is string. If you need to pass in json format, you need to introduce qs.js, depending on the type accepted by the backend.

Qs processing data analysis

First of all, qs is a package managed by the npm repository and can be installed through the npm install qs command.
Address: www.npmjs.com/package/qs

qs.parse(), qs.stringify()

• qs.parse() parses the URL into an object
• qs.stringify() serializes the object into the form of a URL, concatenating it with &

The following is how it is used in actual projects:

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

Vant upload file format

When uploading files, we need to pay attention to the format required for passing to the backend, which can be either file stream or base64. Although vant has already handled both types for us, we also want to use formData to pass the file stream directly to the backend. Some backends need to process and filter out base64 by ourselves. Here we need to use regular fileList[0].content.replace(/^data:image\/\w+;base64,/, '') and then pass it to the backend

Complete code

    <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='Face front photo' :max-count="1" :after-read="afterRead" ></van-uploader>
              <p style="text-align:center;font-size:15px;" v-if="data">Student ID/Work ID: {{data}}</p>
            </div>
          </div>
      </div>
 
  <script>
   var app = new Vue({
    el: '#app',
    data: {
      fileList: [],
      data:'',
    },
    methods:{
      afterRead(file) {
      //Uploading, add the status prompt status to uploading
        file.status = 'uploading';
        file.message = 'Uploading...';
        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)=>{
        //The request returns, and the success status has been obtained. Set the upload success prompt status to done
          if(res.data.code == 0){
            file.status = 'done';
            file.message = '';
            this.data = res.data.data.userNo
            this.$notify({ type: 'success', message: 'Upload successful' });
            
          // Request returns, receiving the prompt that the upload failed and the status is failed
          }else{
            file.status = 'failed';
            file.message = 'Upload failed';
           this.$notify({ type: 'warning', message: res.data.msg });
           this.data = ''
          }
        }).catch(()=>{
          file.status = 'failed';
          file.message = 'Upload failed';
          this.data = ''
        })
      },
    }
  })
  </script>

This concludes this article about the sample code for implementing image upload and face recognition with vue+axios. For more related content on image upload and face recognition with vue axios, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!