“This is the seventh day of my participation in the November Gwen Challenge. Check out the event details: The Last Gwen Challenge 2021

First look at the final result:

Vant’s file uploading component is used here. The back end of uploading the picture recognizes the face in the picture and returns to the front end to obtain the worker id or student ID matched by the face. For subsequent use by other systems, for example, if a face photo is successfully uploaded and recognized, the access control of the conference room can be opened through the face. At present, only a face upload effect is done.

Axios request

When using AXIos to request data, method: When using POST, the default data type of data is string type. If you need to transmit JSON format, you need to introduce qs.js, depending on the type accepted by the back end.

Qs processes data analysis

First, QS is a package managed by the NPM repository, which can be installed by NPM install qs command. Address: www.npmjs.com/package/qs qs.parse(), qs.stringify()

  1. Qs.parse () parses the URL into an object
  2. Qs.stringify () serializes the object into a URL, concatenated 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)
})
Copy the code

Vant upload file format

Upload a file, and one of the things you need to be careful about here is what format you need to pass it to the back end, it can be a file stream, it can be base64, although Vant has handled both of those for us, file stream, we also want to use formData directly to pass it to the back end, Replace (/^data:image\/ w+; /^data:image\/ w+; /^data:image\/ w+; Base64,/, “) is then passed to the back end

The 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 in front' :max-count="1" :after-read="afterRead" ></van-uploader>
              <p style="text-align:center; font-size:15px;" v-if="data">Student ID/Worker ID: {{data}}</p>
            </div>
          </div>
      </div>
 
  <script>
   var app = new Vue({
    el: '#app'.data: {
      fileList: [].data:' ',},methods: {afterRead(file) {
      // Uploading, add the status alert in the upload to 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) = >{
        // The request is returned and the successful status is obtained. Set the status indicating successful uploading 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' });
            
          // The upload request is returned, and the message status failed is received
          }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>
Copy the code