vue3实现抓拍并上传

<template><video ref="videoRef" autoplay playsinline></video><canvas ref="canvasRef" class="hidden"></canvas><button @click="capture">抓拍</button>
</template><style>
.hidden { display: none; }
</style>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';const videoRef = ref(null);
const canvasRef = ref(null);
let stream = null;// 初始化摄像头
const initCamera = async () => {try {stream = await navigator.mediaDevices.getUserMedia({ video: true });videoRef.value.srcObject = stream;} catch (error) {console.error('摄像头访问失败:', error);}
};// 抓拍并存储
const capture = () => {const video = videoRef.value;const canvas = canvasRef.value;const ctx = canvas.getContext('2d');// 设置canvas尺寸与视频一致canvas.width = video.videoWidth;canvas.height = video.videoHeight;// 绘制当前帧到canvasctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 转为base64并存储const base64 = canvas.toDataURL('image/png');localStorage.setItem('userImg', base64);
};// 清理资源
const cleanup = () => {if (stream) {stream.getTracks().forEach(track => track.stop());stream = null;}
};

//图片上传函数

function uploadimg() {
  // 提取base64数据部分
  const base64Data = localStorage.userImg.split(',')[1];


  // 创建FormData对象
  // const formData = new FormData();
  // formData.append('base64Image', base64Data);

  // 也可以直接发送base64字符串
  const data = { base64Image: base64Data };

  // 发送到服务器
  fetch(`http://192.168.2.44:18758/imageUpload/zhuapai`, {
    method: 'POST',
    // body: formData,
    // 如果使用JSON方式
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
  })
    .then(response => response.json())
    .then(data => {
      console.log('上传成功:', data);
      img_url = data.data.fullUrl

      let img0 = document.getElementById("j_img");
      img0.src = "";
    })
    .catch(error => {
      console.error('上传失败:', error);
    });

}

onMounted(initCamera);
onBeforeUnmount(cleanup);
</script>