vue---新增用户之拍照或本地上传照片

功能展示：点击【添加用户】按钮弹出对话框如图，头像上传分为两种方式（1）本地上传（2）打开摄像头拍照上传。最多可上传三张照片，当超过三张，则提示“只能上传三张照片”，如对选择的照片不满意，可将鼠标移入图片，图片右上角即出现红色删除图标，点击删除图标即可删除当前选中的照片。

一、本地上传

二、打开摄像头拍照上传

完整代码：

<template><div><el-button type="primary" size="mini" @click="addUser">添加用户</el-button><!-- 新增用户 --><el-dialogclass="userForm":visible.sync="userFormVisible"@close="closeUserFormDialog"width="480px":close-on-click-modal="false"><div slot="title"><span>{{userInfoFormTitle}}</span></div><el-form:model="userInfoForm":rules="userFormRules"ref="userInfoForm"@keyup.enter.native="submitForm"label-width="80px"size="mini"><el-form-item label="编号" prop="userCode"><el-input v-model="userInfoForm.userCode" name="userCode"></el-input></el-form-item><el-form-item label="姓名" prop="userName"><el-input v-model="userInfoForm.userName" name="userName"></el-input></el-form-item><el-form-item label="信息" prop="userInfo"><el-input v-model="userInfoForm.userInfo" name="userInfo"></el-input></el-form-item><el-form-item label="头像" prop="userImage"><!-- 1.本地上传图片 --><el-button @click="upload" type="file" size="mini">本地上传<inputtype="file"name="userImage"hiddenref="photoFile"@change="fileChange($event)"/></el-button><!-- 2. 打开摄像头拍照--><el-button id="rec" @click="openRec" size="mini">打开摄像头拍照</el-button></el-form-item><div v-show="showVideo" style="text-align:center;"><!-- 隐藏原始video视频 --><video src id="video" style="margin-left:44px; width: 200px;display:none;"></video><!-- video 镜像,对video进行水平翻转 --><canvas width="320" height="240" id="outrec"></canvas><button type="button" class="fileButton" @click.self="takePhoto">拍照</button></div><ul class="img_li"><li v-for="(item, index) in (userInfoForm.userImage||[])" :key="item"><!-- <img :src="item" /> --><divstyle="width: 100px; height: 120px;background-size:cover;background-position:center;":style="{backgroundImage:'url('+item+')'}"></div><!-- 删除图片图标 --><img@click="showFiguredelete(index)"class="delete_img"src="../assets/images/delete.svg"/></li></ul></el-form><div slot="footer" class="dialog-footer"><el-button size="small" @click="userFormVisible=false">取 消</el-button><el-button size="small" type="primary" @click="submitForm">确 定</el-button></div></el-dialog></div>
</template><script>
let mediaStreamTrack = null;
let timer = null;
export default {data() {return {// *新增用户相关属性userFormVisible: false,userInfoFormTitle: "",userInfoForm: {},userFormRules: {userCode: [{ required: true, message: "请输入编号", trigger: "change" },],userName: [{ required: true, message: "请输入姓名", trigger: "change" },],userImage: [{ required: true, message: "请上传头像", trigger: "change" },],},showVideo: false,canvas: null,ctx: null,};},methods: {// ********新增用户***********// 添加用户addUser() {this.userFormVisible = true;this.userInfoFormTitle = "添加用户";this.userInfoForm = {};},// 关闭新增用户对话框closeUserFormDialog() {this.$refs.userInfoForm.resetFields();this.userFormVisible = false;console.log("关闭新增用户对话框", this.showVideo);if (this.showVideo === true) {clearTimeout(timer);// 关闭摄像头mediaStreamTrack.getTracks()[0].stop();console.log("关闭新增用户对话框===");this.showVideo = false;}},// 点击按钮【本地上传】upload() {this.$refs.photoFile.click();},// 选择照片上传fileChange(e) {console.log("e===", e);console.log("userImage===", this.userInfoForm.userImage);// ||只要有一个条件为true时，结果就为true；当两个条件都为false时，结果才为false；// 当一个条件为true时，后面的条件不再判断let arr = (this.userInfoForm.userImage || []).filter((e) => e);// let arr = this.userInfoForm.userImage || [];console.log(" arr===", arr);if (arr.length >= 3) {this.$message({message: "只能上传三张照片",type: "warning",});} else {let file = this.$refs.photoFile.files[0];if (/.(png|jpg|jpeg|gif)$/.test(file.name)) {// let url = URL.createObjectURL(file);let fr = new FileReader();fr.readAsDataURL(file);fr.onload = (e) => {arr.push(e.target.result);this.$set(this.userInfoForm, "userImage", "");this.userInfoForm.userImage = arr;this.$refs.photoFile.value = "";};} else {this.$message({message: "请选择符合格式要求的图片",type: "warning",});this.$refs.photoFile.value = "";}}},// 点击按钮【打开摄像头拍照】openRec() {this.showVideo = true;var video = document.getElementById("video");//视频获取var Devicestate = navigator.mediaDevices.getUserMedia({video: true,});Devicestate.then((mediaStream) => {mediaStreamTrack = mediaStream;// mediaStreamTrack.getTracks()[0].stop(); //关闭摄像头video.srcObject = mediaStream;video.play();// 定义定时器函数,结束后调用clearInterval()取消函数的执行this.canvas = document.getElementById("outrec");this.ctx = this.canvas.getContext("2d");timer = setInterval(() => {// var canvas = document.getElementById("outrec");// var ctx = canvas.getContext("2d");this.ctx.translate(this.canvas.width, 0);this.ctx.scale(-1, 1);this.ctx.drawImage(video,0,0,this.canvas.width,this.canvas.height);this.ctx.translate(this.canvas.width, 0);this.ctx.scale(-1, 1);}, 50);});//用户拒绝使用,或者没有摄像头Devicestate.catch(function (err) {return false;});},// 点击按钮【拍照】takePhoto() {let arr = (this.userInfoForm.userImage || []).filter((e) => e);//视频转换到canvsvar outrec = document.getElementById("outrec");var img = outrec.toDataURL("image/jpeg", 0.5);if (arr.length <= 2) {arr.push(img);} else {this.$message({message: "只能上传三张照片",type: "warning",});}this.$set(this.userInfoForm, "userImage", "");this.userInfoForm.userImage = arr;},// 删除图片showFiguredelete(index) {this.userInfoForm.userImage.splice(index, 1);this.$refs.photoFile.value = "";},// 提交新增submitForm() {this.$refs.userInfoForm.validate((valid) => {if (valid) {console.log("提交数据", this.userInfoForm);// 向后台发送新增数据// let param = {//   form: this.userInfoForm,// };// groupUserAdd(param).then((res) => {//   if (res.data.respCode == "00000") {//     this.$message.success(res.data.respDesc);//     this.userFormVisible = false;//     // 查询用户数据//     // this.getUserList();//   }// });} else {return false;}});},},
};
</script><style lang="less">
.el-dialog {border-radius: 6px;overflow: hidden;
}
// 新增、修改用户对话框
.userForm {.el-dialog__header {background-color: #409eff;color: #fff;font-weight: 600;border-bottom: 1px solid #d5dada;}.el-dialog__headerbtn .el-dialog__close {color: #fff;}// 删除用户头像.img_li {text-align: center;li {list-style: none;display: inline-block;position: relative;margin: 5px 5px 0 0;width: 100px;height: 100px;&:hover {.delete_img {width: 20px;height: 20px;display: inline-block;position: absolute;top: -8px;right: -8px;z-index: 100;cursor: pointer;}}.delete_img {display: none;}img {width: 100px;height: 100px;z-index: 1;}}}// // 拍照按钮.fileButton {height: 30px;width: 100px;border-radius: 4px;background: rgb(128, 128, 228);color: white;border: none;margin: 0px 35%;}
}
</style>

vue---新增用户之拍照或本地上传照片相关推荐

php调用本地摄像头,javascript 调用本地摄像头拍照 ajax提交上传
最近在做一个小应用,里面有一个功能就是需要打开摄像头拍照并且上传,今天就记录一下这个小功能. HTML篇: 这里我是用的layui的样式,需要先引用layui的样式,才会有上图的效果. * 照片: 点 ...
SpringBoot 使用MultipartFile上传组件实现本地上传用户头像
GIF动图展示 SpringBoot 使用MultipartFile上传组件实现本地上传用户头像GIF效果图本章目录 GIF动图展示主要实现思路 1.使用MultipartFile需要引入的依赖 ...
vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片一.cropper的使用使用教程:htt ...
基于 springboot + vue 的 element-ui 的 upload 组件头像上传功能
基于 springboot + vue 的 element-ui 的 upload 组件头像上传为了方便我们自己本地测试使用,我们将文件上传至自己电脑的磁盘中,由于项目是前后端分离的,所以我们会直接 ...
js文件本地上传服务器地址,js 本地文件同步服务器地址
js 本地文件同步服务器地址内容精选换一换用户可以将本地NAS存储中的数据,通过云专线迁移至云上SFS Turbo文件系统中,进行云上业务拓展.此方案通过在云上创建一台Linux操作系统的云服务 ...
neditor本地上传音频一
上一篇上传视频首先需要你查看前两章上传图片与视频,只有对这两章有了一定的了解才能去增加音频上传,我先贴两张成功的图片: 好了,这是修改成功后的一套流程操作,改的东西实在太多,导致我回头找的时候也忘记 ...
uniapp 调用手机相机拍照实现图片上传
uniapp 调用手机相机拍照实现图片上传参考资料:https://blog.csdn.net/weixin_46391646/article/details/108450898 调用相机相册 un ...
Git和Github本地上传下载及拉取他人代码
Git和Github本地上传下载及拉取他人代码闻道有先后,术业有专攻(自己瞎搞一两个小时,没有后端老王15分钟来的透彻) 一:通过Git把Github上的代码下载到本地 !首先是什么!!下载Git, ...
前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传分页】文件上传也不过如此～
前后端分离 – 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统[文件上传分页 ] 文件上传也不过如此~ 引言 Hello,我是Bug终结者,一名热爱后端J ...

vue---新增用户之拍照或本地上传照片

一、本地上传

二、打开摄像头拍照上传

vue---新增用户之拍照或本地上传照片相关推荐

最新文章

热门文章