Merge branch 'master' of http://192.168.101.4:3000/jiaxiaoqiang/JG-CLIENT-TEMP

src/api/file/index.ts

@@ -10,8 +10,9 @@ import { FileInfo } from "./types";
 export function uploadFileApi(file: File): AxiosPromise<FileInfo> {
   const formData = new FormData();
   formData.append("file", file);
+  console.log("dddd", file);
   return request({
-    url: "/api/v1/files",
+    url: "/api/v1/base/upload",
     method: "post",
     data: formData,
     headers: {

src/components/Upload/CameraUpload.vue

@@ -1,40 +1,72 @@
 <template>
   <div class="camera-upload">
-    <svg-icon icon-class="paizhao" size="80" />
+    <svg-icon icon-class="paizhao" size="80" @click="openMedia" />
     <svg-icon icon-class="bendishangchuan" size="80" />
   </div>
-  <el-button @click="openMedia">开启摄像头</el-button>
-  <video id="video" autoplay="autoplay" height="500px" width="500px"></video>
-  <canvas id="canvas" height="500px" width="500px"></canvas>
-  <el-button @click="takePhoto">拍照</el-button>
-  <img id="imgTag" alt="imgTag" src="" />
-  <el-button @click="closeMedia">关闭摄像头</el-button>
+
+  <el-dialog
+    id="carmer-dialog"
+    v-model="visible"
+    :close-on-click-modal="false"
+    :title="null"
+    close-icon="null"
+  >
+    <video id="video" autoplay="autoplay" height="500px" width="500px"></video>
+    <canvas id="canvas" height="500px" width="500px"></canvas>
+    <img id="imgTag" alt="imgTag" src="" />
+    <div class="bottom-btns">
+      <el-button class="cancelBtn" @click="closeMedia">关闭</el-button>
+      <el-button class="sureBtn" type="primary" @click="takePhoto"
+        >拍照
+      </el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
+import { uploadFileApi } from "@/api/file";
 let mediaStreamTrack = null; // 视频对象(全局)
 let video;
 
+const cameraEmit = defineEmits(["uploadFinish"]);
+
 const openMedia = async () => {
-  let constraints = {
-    video: { width: 500, height: 500 },
-    audio: false,
-  };
-  //获得video摄像头
-  video = document.getElementById("video");
-  navigator.mediaDevices
-    .getUserMedia(constraints)
-    .then((mediaStream) => {
-      // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
-      mediaStreamTrack = mediaStream.getVideoTracks();
-      video.srcObject = mediaStream;
-      video.play();
-    })
-    .catch((error) => {
-      console.log("Error: " + error);
-    });
+  visible.value = true;
+  nextTick(() => {
+    let constraints = {
+      video: { width: 500, height: 500 },
+      audio: false,
+    };
+    //获得video摄像头
+    video = document.getElementById("video");
+    navigator.mediaDevices
+      .getUserMedia(constraints)
+      .then((mediaStream) => {
+        // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
+        mediaStreamTrack = mediaStream.getVideoTracks();
+        video.srcObject = mediaStream;
+        video.play();
+      })
+      .catch((error) => {
+        console.log("Error: " + error);
+        ElMessage.error("没有找到设备，或者没有权限");
+      });
+  });
 };
 
+function dataURItoBlob(base64Data) {
+  var byteString;
+  if (base64Data.split(",")[0].indexOf("base64") >= 0)
+    byteString = atob(base64Data.split(",")[1]);
+  else byteString = unescape(base64Data.split(",")[1]);
+  var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
+  var ia = new Uint8Array(byteString.length);
+  for (var i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  return new Blob([ia], { type: mimeString });
+}
+
 // 拍照
 function takePhoto() {
   //获得Canvas对象
@@ -44,25 +76,15 @@ function takePhoto() {
   ctx.drawImage(video, 0, 0, 500, 500);
 
   // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
-  let img = document.getElementById("canvas").toDataURL();
-  // 这里的img就是得到的图片
-  console.log("img-----", img);
-  document.getElementById("imgTag").src = img;
-  //上传
-  /*$.ajax({
-      url: "/xxxx.do",
-      type: "POST",
-      data: {"imgData": img},
-      success: function (data) {
-          console.log(data);
-          document.gauges.forEach(function (gauge) {
-              gauge.value = data.data
-          });
-      },
-      error: function () {
-          console.log("服务端异常！");
-      }
-  });*/
+  let base64Data = document.getElementById("canvas").toDataURL();
+  let blob = dataURItoBlob(base64Data);
+  let file = new File([blob], "filename.png", { type: "image/png" });
+
+  uploadFileApi(file).then((res) => {
+    console.log("上传图片", res);
+    cameraEmit("uploadFinish", res);
+    closeMedia();
+  });
 }
 
 // 关闭摄像头
@@ -75,7 +97,10 @@ function closeMedia() {
   });
 
   document.getElementById("video").srcObject = null;
+  visible.value = false;
 }
+
+const visible = ref(false);
 </script>
 
 <style lang="scss" scoped>
@@ -93,3 +118,70 @@ function closeMedia() {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+#carmer-dialog {
+  background: #f1f3f5;
+  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px 16px 16px 16px;
+  width: 924px;
+  max-height: 80vh;
+
+  .top-title {
+    width: 100%;
+    height: 38px;
+    font-weight: 500;
+    font-size: 38px;
+    color: rgba(0, 0, 0, 0.9);
+    text-align: center;
+  }
+
+  .center-content {
+    margin-top: 24px;
+    width: 100%;
+    //height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  .body {
+    width: calc(100% - 240px);
+    max-height: calc(50vh - 80px);
+    margin: 0 auto;
+    overflow-y: auto;
+
+    .box {
+      width: 100%;
+      height: 100px;
+    }
+  }
+
+  .bottom-btns {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .button {
+      margin-right: 20px;
+    }
+
+    .cancelBtn {
+      width: 292px;
+      height: 80px;
+      background: rgba(0, 0, 0, 0.06);
+      border-radius: 76px 76px 76px 76px;
+    }
+
+    .sureBtn {
+      width: 292px;
+      height: 80px;
+      background: #0a59f7;
+      border-radius: 76px 76px 76px 76px;
+    }
+  }
+}
+</style>

src/views/pro-steps/components/wuliaocaiji.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- 物料采集 -->
     <el-input v-model="input" placeholder="Please input" style="width: 240px" />
-    <CameraUpload />
+    <CameraUpload @upload-finish="finish" />
   </div>
 </template>
 
@@ -13,6 +13,10 @@ defineOptions({
 import CameraUpload from "@/components/Upload/CameraUpload.vue";
 
 const input = ref("");
+
+const finish = (value) => {
+  console.log("采集", value);
+};
 </script>
 
 <style lang="scss" scoped></style>