diff --git a/public/img/load.gif b/public/img/load.gif new file mode 100644 index 00000000..02814308 Binary files /dev/null and b/public/img/load.gif differ diff --git a/src/components/webCameraIMG/webCamera.vue b/src/components/webCameraIMG/webCamera.vue index 05501ff6..2f16ba6f 100644 --- a/src/components/webCameraIMG/webCamera.vue +++ b/src/components/webCameraIMG/webCamera.vue @@ -3,17 +3,35 @@
- 启动摄像头 - 关闭摄像头 - 点击拍摄 - 旋转摄像头 - 放大图片 - 缩小图像 + +
- 主摄像头 + 主摄像头 + +
+ + + + + + + + + +
@@ -36,18 +54,59 @@ const IMG_camera = ref(false); // 摄像头状态 const IMG_URL = 'http://127.0.0.1:38088/video=stream&camidx=0'; // 主摄像头地址 const IMG_VIEW = ref(null); // 主摄像头实例 const IMG_Thumbnail = ref(null); // 缩略图实例 -let IMG_API = reactive('/api/blade-resource/oss/endpoint/put-file'); -let zoom = reactive(5); //图片缩放等级 +const IMG_TITLE=ref('设备正在初始化中...') +let IMG_Trimming_edge = ref(false); //图片裁边 +let IMG_startUp = ref(false); //摄像头是否启动 +let IMG_API = ref('/api/blade-resource/oss/endpoint/put-file'); +let zoom = ref(5); //图片缩放等级 +const $emit = defineEmits(['upload-success']); + +// 获取设备状态 +const Getdevicestatus = () => {}; +//(开启/关闭)图像裁边 +const Opentrimming = () => { + IMG_Trimming_edge.value = !IMG_Trimming_edge.value; + if (IMG_Trimming_edge.value) { + ElMessage({ message: '图像裁边已开启', type: 'success' }); + mylog('图像裁边已开启'); + } else { + ElMessage({ message: '图像裁边已关闭', type: 'success' }); + mylog('图像裁边已关闭'); + } +}; +// 框选图片 +const FrameSelectImage = () => { + let data = { + filepath: '', // 是否保存本地，可选a，为空不保存本地，否则按路径保存 + left: 0, + top: 0, + right: 100, + bottom: 100, + }; + axios.post('/imgapi/select=imagearea', JSON.stringify(data)).then(res => { + console.log(res, '框选图片'); + }); +}; // 开启摄像头 const Deviceinitialization = () => { IMG_camera.value = true; // 摄像头打开 +// 这里需要判断设备是否在线 let TIME_IMG_VIEW = setTimeout(() => { if (IMG_VIEW.value) { + IMG_startUp.value = true; //摄像头已启动 IMG_VIEW.value.src = IMG_URL; // 主摄像头地址 + IMG_TITLE.value='' + ElMessage({ message: '摄像头已启动', type: 'success' }); + mylog('摄像头已启动'); } clearTimeout(TIME_IMG_VIEW); - }, 50); + }, 2000); }; +// 页面初始化加载 +const onLoad=()=>{ + Deviceinitialization();//初始化设备 +} +onLoad() // 打印日志 const mylog = val => { let element = document.getElementById('log'); @@ -57,17 +116,14 @@ const mylog = val => { }; // 图片缩放API -const zoomAPI = () => { +const zoomAPI = attribute => { let data = { - action: '0', - corp: zoom, + camidx: '0', // 摄像头，0:主头；1:副头 + corp: JSON.stringify(zoom.value), // 放大比例，取值0~9，0：原图，9最大显示 }; axios - .post('/imgapi/stream=zoominout', data) - .then(() => { - IMG_camera.value = false; // 摄像头打开 - Deviceinitialization() - }) + .post('/imgapi/stream=zoominout', JSON.stringify(data)) + .then(() => {}) .catch(error => { console.error('请求出错', error); }); @@ -75,26 +131,26 @@ const zoomAPI = () => { // 放大图片 const Enlargeimage = () => { - if (zoom == 9) { + if (zoom.value == 9) { ElMessage({ message: '已经最大了', type: 'warning', }); return; } - zoom += 1; + zoom.value += 1; zoomAPI(); }; // 缩小图片 const Reduceimage = () => { - if (zoom == 0) { + if (zoom.value == 0) { ElMessage({ message: '已经最小了', type: 'warning', }); return; } - zoom -= 1; + zoom.value -= 1; zoomAPI(); }; @@ -106,9 +162,10 @@ const Turnoffcamera = () => { axios .post('/imgapi/video=close', data) .then(() => { - if (IMG_VIEW.value) { - IMG_VIEW.value.src = ''; - } + IMG_VIEW.value.src = ''; //关闭地址 + IMG_startUp.value = false; //摄像头已关闭 + ElMessage({ message: '摄像头已关闭', type: 'success' }); + mylog('摄像头已关闭'); IMG_camera.value = false; // 关闭节点 }) .catch(error => { @@ -133,17 +190,32 @@ const base64ToBlob = (base64, mime) => { }; // 上传图片函数 -const Upload_Images = blob => { +const Upload_Images = file => { + // 创建一个FormData对象 const formData = new FormData(); - formData.append('file', blob); + + // 确保文件具有正确的文件名和类型 + const filename = file.name || 'image.jpg'; // 默认文件名 + const filetype = file.type || 'image/jpeg'; // 默认文件类型 + + // 使用File对象确保文件流具有正确的文件名和类型 + const fileBlob = new Blob([file], { type: filetype }); + const fileWithMetadata = new File([fileBlob], filename, { type: filetype }); + + // 将文件附加到FormData对象中 + formData.append('file', fileWithMetadata); + + // 使用axios发送POST请求 axios - .post(IMG_API, formData, { + .post(IMG_API.value, formData, { headers: { 'Content-Type': 'multipart/form-data', }, }) .then(res => { console.log(res, '图片上传成功'); + // 触发上传成功事件 + $emit('upload-success', res); }) .catch(error => { console.error('上传失败', error); @@ -165,10 +237,11 @@ const IMG_add = img_base64 => { mylog('添加缩略图成功'); } console.log(img, 'img'); - // Upload_Images(blob);//上传图片接口 + Upload_Images(blob); //上传图片接口 console.log(url, 'blob'); }; + // 旋转摄像头 const Rotatingcamera = angle => { // angle:角度 @@ -178,15 +251,17 @@ const Rotatingcamera = angle => { mylog('旋转摄像头成功'); }); }; + // 点击拍照 -let view1_scan = () => { +let view1_scan = async () => { let data = { - filepath: 'base64', - rotate: '0', - cutpage: '0', - camidx: '0', - ColorMode: '0', - quality: '3', + filepath: 'base64', //图片保存地址，传参类型：["", "D:\\1.jpg", "base64"] + rotate: '0', // 图像旋转角度，90的整数倍，默认："0" + camidx: '0', // 摄像头索引，参数：0:主头；1:副头 + ColorMode: '0', // 色彩模式，图片保存本地时调用。0：彩色 1：灰色 2：黑白 3：白纸印章 4：去背景色(普通文件) 5:去背景色(身份证) + deskew: IMG_Trimming_edge.value ? '1' : '0', //纠偏（主头有效），参数：0:不纠偏；1:纠偏(裁边) + bAutoAdjust: '0', // 是否自动摆正： 0：不摆正 1：摆正 + quality: '2', //图片质量，图片保存本地调用。0:默认质量；1:高质量；2:较高质量；3:中质量；4:较低质量；5:低质量 }; axios.post('/imgapi/video=grabimage', JSON.stringify(data)).then(res => { console.log(res, '图片地址'); @@ -195,7 +270,7 @@ let view1_scan = () => { return ElMessage.error('拍摄失败请重新尝试'); } ElMessage({ message: '拍摄成功', type: 'success' }); - IMG_add(res.data.photoBase64); + IMG_add(res.data.photoBase64); //添加略缩图上传 }); }; @@ -226,10 +301,43 @@ let view1_scan = () => { width: 60%; height: 300px; border: 1px solid red; + position: relative; + background-color: #000; img { width: 100%; height: 100%; } + .el_icon { + position: absolute; + bottom: 10px; + left: 50%; + transform: translate(-50%, 0); + font-size: 25px; + color: #fff; + } + .el_icon { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .el_icon i { + margin: 0 10px; + } + .el_icon i:active { + color: #2196f3; + } + .SwitchButton { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 25px; + color: #fff; + } + .SwitchButton:active { + color: #2196f3; + } } /* 缩略图 */ #suoluetu { diff --git a/src/views/system/pdaversion/pdaversionManage.vue b/src/views/system/pdaversion/pdaversionManage.vue index 37b5aded..938b4732 100644 --- a/src/views/system/pdaversion/pdaversionManage.vue +++ b/src/views/system/pdaversion/pdaversionManage.vue @@ -439,16 +439,51 @@ export default { uploadBefore(file, done, loading, column) { return true; // 返回 true 继续上传，返回 false 中止上传 }, - async customUploadRequest({file}){ - console.log(file,'文件上传'); - const response = await this.$fileslicing(this, file);//文件切换全局函数(初始) - if(response.code && response.code == 200){ - this.form.filelink = response.data.domain + response.data.name + async customUploadRequest({ file }) { + try { + console.log(file, '文件上传'); + const responses = await this.$fileslicing(this, file); // 文件切片上传的全局函数(初始) + console.log(responses, 'responses'); + let time= setTimeout(()=>{ + let response=responses + if (response && response.code === 200) { + // 确保 this.form.filelink 被初始化为一个数组 + if (!this.form.filelink) { + this.form.filelink = []; + console.log('初始化 this.form.filelink 为空数组'); + } + + // 确保数组的第一个元素存在且是一个对象，并初始化必需的嵌套结构 + if (!this.form.filelink[0]) { + this.form.filelink[0] = { response: { data: {} } }; + console.log('初始化 this.form.filelink[0] 为 { response: { data: {} } }'); + } else { + if (!this.form.filelink[0].response) { + this.form.filelink[0].response = { data: {} }; + console.log('初始化 this.form.filelink[0].response 为 { data: {} }'); + } + if (!this.form.filelink[0].response.data) { + this.form.filelink[0].response.data = {}; + console.log('初始化 this.form.filelink[0].response.data 为 {}'); + } + } + + console.log('在赋值之前的 this.form.filelink:', this.form.filelink); + this.form.filelink[0].response.data.link = response.data.domain + response.data.name; + console.log('赋值之后的 this.form.filelink:', this.form.filelink); + + } else { + console.error('文件上传失败或响应无效', response); } - console.log(response,'文件上传返回值'); - }, + clearTimeout(time) + },0) + } catch (error) { + console.error('文件上传过程中发生错误', error); + } +}, handleSubmit() { if (!this.form.id) { + console.log( this.form.filelink,' this.form.filelink'); this.form.link = this.form.filelink[0].response.data.link; this.form.versionCode = this.form.versionName.split('.').join(''); this.form.newTypes = this.form.link.indexOf('wgt') == -1 ? '1' : '2';