照片比对客户端上传

src/components/FaceRecognition/FaceRecognition.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import MD5 from "js-md5";
 import { mapState as globalMapState } from "vuex";
 import { createNamespacedHelpers } from "vuex";
 const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
@@ -146,8 +147,14 @@ export default {
         this.videoStartPlay();
         // console.log(captureBlob.size);
         this.serverLog("debug/S-004001", "抓拍照片的大小：" + captureBlob.size);
-        const captureFilePath = await this.uploadToServer(captureBlob);
-        await this.faceCompare(captureFilePath, examRecordDataId);
+        const [captureFilePath, signIdentifier] = await this.uploadToServer(
+          captureBlob
+        );
+        await this.faceCompare(
+          captureFilePath,
+          signIdentifier,
+          examRecordDataId
+        );
       } catch (error) {
         // FIXME: more processing
         console.log("定时抓拍流程失败");
@@ -189,9 +196,11 @@ export default {
         const captureBlob = await this.getSnapShot();
         this.videoStartPlay();
         this.msg = "上传照片中...";
-        const captureFilePath = await this.uploadToServer(captureBlob);
+        const [captureFilePath, signIdentifier] = await this.uploadToServer(
+          captureBlob
+        );
         this.msg = "人脸比对中...";
-        await this.faceCompareSync(captureFilePath);
+        await this.faceCompareSync(captureFilePath, signIdentifier);
       } catch (error) {
         // FIXME: more processing
         console.log("同步照片比对流程失败");
@@ -238,18 +247,53 @@ export default {
       });
     },
     async uploadToServer(captureBlob) {
+      async function blobToArray(blob) {
+        return new Promise(resolve => {
+          var reader = new FileReader();
+          reader.addEventListener("loadend", function() {
+            // reader.result contains the contents of blob as a typed array
+            resolve(reader.result);
+          });
+          reader.readAsArrayBuffer(blob);
+        });
+      }
       //保存抓拍照片到服务器
-      // var fileName = new Date().getTime() + ".png";
-      // var fileUrl = "/api/exchange/inner/upyun/put/capturePhoto/" + fileName;
-      var fileUrl = "/api/exchange/inner/upyun/put/capturePhoto/png";
-      let resultUrl;
+      let resultUrl, signIdentifier;
       try {
-        const res = await this.$http.put(fileUrl, captureBlob, {
-          headers: {
-            "Content-Type": "image/png",
-          },
+        const buffer = await blobToArray(captureBlob);
+
+        // console.log(buffer);
+        // var view1 = new Uint8Array(buffer);
+        // console.log(buffer[0], buffer[1], buffer[429721]);
+        const fileMd5 = MD5(buffer);
+        console.log(fileMd5);
+
+        const params = new URLSearchParams();
+        params.append("fileSuffix", "png");
+        // params.append("fileMd5", fileMd5);
+        const res = await this.$http.get(
+          "/api/ecs_oe_student/examControl/getCapturePhotoUpYunSign?" + params
+        );
+
+        console.log(res);
+
+        let myHeaders = new Headers();
+        for (let [k, v] of Object.entries(res.data.headers)) {
+          // console.log(k, v);
+          if (k.includes("tion") || k.includes("Date") || k.includes("MD5")) {
+            if (k === "Date") k = "x-date";
+            myHeaders.append(k, v);
+          }
+        }
+        const response = await fetch(res.data.uploadUrl, {
+          mode: "cors",
+          method: "PUT",
+          headers: myHeaders,
         });
-        resultUrl = res.data;
+
+        console.log(response);
+        resultUrl = res.data.accessUrl;
+        signIdentifier = res.data.signIdentifier;
         this.serverLog("debug/S-005001", "抓拍照片保存成功：");
       } catch (e) {
         console.log(e);
@@ -270,13 +314,15 @@ export default {
       //   this.$Message.error({ content: "获取照片下载前缀失败！", duration: 15,  closable: true});
       //   throw "获取照片下载前缀失败！";
       // }
-      return resultUrl;
+      return [resultUrl, signIdentifier];
     },
-    async faceCompareSync(captureFilePath) {
+    async faceCompareSync(captureFilePath, signIdentifier) {
       try {
         const res = await this.$http.post(
-          "/api/ecs_oe_student_face/examCaptureQueue/compareFaceSync?fileUrl=" +
-            captureFilePath
+          "/api/ecs_oe_student_face/examCaptureQueue/compareFaceSync?signIdentifier=" +
+            signIdentifier +
+            "&fileUrl=" +
+            encodeURIComponent(captureFilePath)
         );
 
         // TODO: 识别成功、失败的通知或跳转
@@ -291,7 +337,7 @@ export default {
         throw "同步照片比较失败！";
       }
     },
-    async faceCompare(captureFilePath, examRecordDataId) {
+    async faceCompare(captureFilePath, signIdentifier, examRecordDataId) {
       try {
         let cameraInfos;
         let hasVirtualCamera = false;
@@ -326,7 +372,8 @@ export default {
         }
 
         let body = {
-          fileUrl: captureFilePath,
+          fileUrl: encodeURIComponent(captureFilePath),
+          signIdentifier,
           examRecordDataId,
         };