VUE3拍照+上传服务器

经过一周的奥里给终于磕出来了，废话不多说代码见。

WEB前端

这是 Template的

<template>

  <div class="camera_outer">

          <!-- poster="背景图" -->

          <video

            id="videoCamera"

            :width="videoWidth"

            :height="videoHeight"

            autoplay

            poster="https://ts1.cn.mm.bing.net/th/id/R-C.23034dbcaded6ab4169b9514f76f51b5?rik=mSGADwV9o%2fteUA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f40%2f9640_1.jpg&ehk=RYei4n5qyNCPVysJmE2a3WhxSOXqGQMGJcvWBmFyfdg%3d&risl=&pid=ImgRaw&r=0"

          />

          <canvas

            style="display: none"

            id="canvasCamera"

            :width="videoWidth"

            :height="videoHeight"

          ></canvas>

          <el-button @click="getCompetence()">打开摄像头</el-button>

          <el-button @click="stopNavigator()">关闭摄像头</el-button>

          <el-button @click="setImage()">拍照</el-button>

          <div v-if="imgSrc" class="img_bg_camera">

            <img :src="imgSrc" alt="" class="tx_img" />

          </div>

        </div>

</template>

这是Script的哦
 

<script setup>

import { ref, onMounted, nextTick } from "vue";

import axios from "axios";

// 相机拍照

const videoWidth = ref(400);

const videoHeight = ref(300);

const imgSrc = ref("");  

const blobFile = ref(null);

const thisCancas = ref(null);

const thisContext = ref(null);

const thisVideo = ref(null);

const emit = defineEmits(["refreshDataList"]);

//   vue中使用摄像头拍照(监听摄像头)

function getCompetence() {

  thisCancas.value = document.getElementById("canvasCamera");

  thisContext.value = thisCancas.value.getContext("2d");

  thisVideo.value = document.getElementById("videoCamera");

  // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象

  if (navigator.mediaDevices === undefined) {

    navigator.mediaDevices = {};

  }

  // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象

  // 使用getUserMedia，因为它会覆盖现有的属性。

  // 这里，如果缺少getUserMedia属性，就添加它。

  if (navigator.mediaDevices.getUserMedia === undefined) {

    navigator.mediaDevices.getUserMedia = function (constraints) {

      // 首先获取现存的getUserMedia(如果存在)

      let getUserMedia =

        navigator.webkitGetUserMedia ||

        navigator.mozGetUserMedia ||

        navigator.getUserMedia;

      // 有些浏览器不支持，会返回错误信息

      // 保持接口一致

      if (!getUserMedia) {

        return Promise.reject(

          new Error("getUserMedia is not implemented in this browser")

        );

      }

      // 否则，使用Promise将调用包装到旧的navigator.getUserMedia

      return new Promise(function (resolve, reject) {

        getUserMedia.call(navigator, constraints, resolve, reject);

      });

    };

  }

  let constraints = {

    audio: false,

    video: {

      width: videoWidth.value,

      height: videoHeight.value,

      transform: "scaleX(-1)",

    },

  };

  navigator.mediaDevices

    .getUserMedia(constraints)

    .then(function (stream) {

      // 旧的浏览器可能没有srcObject

      if ("srcObject" in thisVideo.value) {

        thisVideo.value.srcObject = stream;

      } else {

        // 避免在新的浏览器中使用它，因为它正在被弃用。

        thisVideo.value.src = window.URL.createObjectURL(stream);

      }

      thisVideo.value.onloadedmetadata = function (e) {

        thisVideo.value.play();

      };

    })

    .catch((err) => {

      console.log(err);

    });

}

//  绘制图片（拍照功能）

const setImage = async () => {

  // 点击，canvas画图

  thisContext.value.drawImage(

    thisVideo.value,

    0,

    0,

    videoWidth.value,

    videoHeight.value

  );

  // 获取图片base64链接

  let image = thisCancas.value.toDataURL("image/png");

  console.log(dataURLtoFile(image, "图片文件")); // 转换为file文件

  blobFile.value = dataURLtoFile(image, "图片文件");

  let formData = new FormData();

  formData.append("file", blobFile.value,"filename.jpg"); //图片内容 

//其中，blobFile 是包含图片内容的变量，"file" 是字段名，"filename.jpg" 是可选的文件名。将这个 FormData 对象发送到服务器，就可以上传图片数据了。

  // tips 此时已经获取到了fromData类型的数据

  console.log(formData.getAll("file")[0], "查看数据内容", formData); // 查看数据内容

  imgSrc.value = image;

  emit("refreshDataList", imgSrc.value);

  // console.log("图片数据", imgSrc.value) ;

  //这是我的接口啊！你可得写你自己得后端接口

  const adimg = await axios.post(

    "http://localhost:3000/myp/save",

    formData

  );

};

// base64转文件

function dataURLtoFile(dataurl, filename) {

  let arr = dataurl.split(",");

  let mime = arr[0].match(/:(.*?);/)[1];

  let bstr = atob(arr[1]);

  let n = bstr.length;

  let u8arr = new Uint8Array(n);

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n);

  }

  return new File([u8arr], filename, { type: mime });

}

// 关闭摄像头

function stopNavigator() {

  thisVideo.value.srcObject.getTracks()[0].stop();

}

</script>
 

node后端 :

        静态文件配置我就不说了吧，想看可以去:
        https://blog.youkuaiyun.com/MSanXun/article/details/129485728?spm=1001.2014.3001.5501

简单说下吧：那我

app.js文件

   

app.use('/upload', express.static('upload')) //记得安装 multiparty:  npm i multiparty

 router文件中的index.js

   const multiparty =require("multiparty")//存储图片用

  //图片上传

  router.post('/save',(req,res)=>{

    let from =new multiparty.Form()//调用multiparty 下的Form

    from.uploadDir='upload'//咱们创建的upload

    from.parse(req,(err,Datas,Imgdata)=>{

      console.log("http://localhost:3000/"+Imgdata.file[0].path);//http://localhost:3000/后端端口号，Imgdata是前端传递过来的，可以打印Imgdata查看,我的服务器接口是3000你得写自己得端口号啊

        res.send("http://localhost:3000/"+Imgdata.file[0].path)

    })

  })

就到这里吧，如果报错了私信我，必回！ 点赞再走呗，谢谢您嘞。