Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to upload pictures to recognize other people's faces by vue+axios". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to upload a picture to recognize other people's faces by vue+axios".

Let's take a look at the final effect:

The file upload component of vant is used here. The back end of the uploaded image recognizes the face in the picture, returns it to the front end, and obtains the job number or student number of the face match. For subsequent use of other systems, such as uploading a successful face photo recognition, you can open the access control of the conference room through the face. So far, I have only done the effect of uploading a human face.

Axios request

When using axios to request data, when method:post, the default data type for data is the type of string. If you need to pass 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 a 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 URL into the form of an object

Qs.stringify () serializes the object into the form of URL, stitching with &

The following is how it is used in a real project:

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

To upload files, we need to pay attention to the format needed to pass them to the backend, either file stream or base64. Although both types have been processed by vant, we also want to directly use formData to send files directly to the backend. Base64 has some backend that we need to deal with and filter. Here we need to use regular fileList [0] .content.replace (/ ^ data:image\ /\ w +). Base64,/,') and then pass it to the backend

Complete code

Student number / job number: {{data}}

Var app = new Vue ({el:'# app', data: {fileList: [], data:'',}, methods: {afterRead (file) {/ / upload, adding the status in upload prompts status as 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) = > {/ / request to return And the status of success has been obtained. Set the prompt status for successful upload 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 request returns and receives the prompt that upload failed: 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 ='})},}}) at this point, I believe you have a deeper understanding of "how to upload pictures to recognize other people's faces on vue+axios". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.