代码实战-前端-Vue ElementUI 调用摄像头并上传到后端的代码案例

先上效果图

调用摄像头的图片

拍照的图片

上传文件的效果图

查看上传的图片(上传完的图片合并成一个PDF)

引入插件

-- 引入组件
import CameraImage from '@/components/CameraImage/CameraComponets.vue';

-- 放在vue的components中
  components: {
   
    CameraImage
  },

-- template中的代码
    <el-dialog title="影像采集" v-if="uploadDialogImageVisible" :visible.sync="uploadDialogImageVisible" align="center">
      <CameraImage></CameraImage>
    </el-dialog>

组件代码

<template>
  <div>
    <video ref="video" autoplay></video>
    <el-button
      type="primary"
      plain
      icon="el-icon-refresh"
      size="mini"
      @click="captureImage"
    >拍照
    </el-button>
    <div v-if="images.length > 0" class="grid">
      <div v-for="(image, index) in images" :key="index" class="grid-item">
        <img :src="image.url" alt="Photo">
      </div>
    </div>
    <el-button
      type="success"
      plain
      icon="el-icon-upload2"
      size="mini"
      :disabled="!images.length || isUploading"
      @click="uploadImages"
    >上传照片
    </el-button>
  </div>
</template>

<script>
import {
    mergeImage } from "@/api/image/merge";
import axios from 'axios';

export default {
   
  data() {
   
    return {
   
      stream: null,
      images: [], // 存储拍摄的照片
      isUploading: false,
    };
  },
  methods: {
   
    async startCamera() {
   
      try {
   
        this.stream = await navigator.mediaDevices.getUserMedia({
    video: true });
        this.$refs.video.srcObject =