From d68f647b3e74f073d65b21de5e3f1259f70cf1ac Mon Sep 17 00:00:00 2001
From: yubo <autumnal_wind@yeah.net>
Date: 星期二, 24 三月 2026 12:15:04 +0800
Subject: [PATCH] feat(upload): 支持上传方式选择弹窗功能
---
src/views/user/inemployees.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 112 insertions(+), 4 deletions(-)
diff --git a/src/views/user/inemployees.vue b/src/views/user/inemployees.vue
index 49d7fe0..03d26f7 100644
--- a/src/views/user/inemployees.vue
+++ b/src/views/user/inemployees.vue
@@ -267,7 +267,6 @@
show-overflow-tooltip
prop="allDeptName"
label="部门（护卫点）"
- width="300"
sortable="custom"
:sort-orders="['ascending', 'descending']"
/>
@@ -353,11 +352,11 @@
v-if="empBaseInfoImageUrl"
:src="empBaseInfoImageUrl"
class="avatar"
- @click="openCamera"
+ @click="openUploadChoice"
>
- <div v-else class="avatar-uploader-placeholder" @click="openCamera">
+ <div v-else class="avatar-uploader-placeholder" @click="openUploadChoice">
<i class="el-icon-plus avatar-uploader-icon" />
- <div class="upload-tip">点击拍照上传</div>
+ <div class="upload-tip">点击上传照片</div>
</div>
</div>
</el-aside>
@@ -1003,6 +1002,25 @@
</div>
</el-dialog>
+ <!-- 上传方式选择弹窗 -->
+ <el-dialog
+ title="选择上传方式"
+ :visible.sync="uploadChoiceDialogVisible"
+ width="400px"
+ :close-on-click-modal="false"
+ >
+ <div class="upload-choice-container">
+ <div class="upload-choice-item" @click="choiceCamera">
+ <i class="el-icon-camera" />
+ <span>拍照上传</span>
+ </div>
+ <div class="upload-choice-item" @click="choiceFile">
+ <i class="el-icon-folder-opened" />
+ <span>文件上传</span>
+ </div>
+ </div>
+ </el-dialog>
+
<!-- 摄像头拍照弹窗 -->
<el-dialog
title="拍照上传"
@@ -1104,6 +1122,8 @@
},
baseicInformationForm: {},
empBaseInfoImageUrl: '',
+ // 上传方式选择弹窗
+ uploadChoiceDialogVisible: false,
// 摄像头相关
cameraDialogVisible: false,
capturedImage: '',
@@ -1646,6 +1666,58 @@
} else {
this.$message.error('图片大小超过4M,请重新上传')
}
+ },
+ // 打开上传方式选择弹窗
+ openUploadChoice() {
+ this.uploadChoiceDialogVisible = true
+ },
+ // 选择拍照上传
+ choiceCamera() {
+ this.uploadChoiceDialogVisible = false
+ this.cameraDialogVisible = true
+ this.$nextTick(() => {
+ this.initCamera()
+ })
+ },
+ // 选择文件上传
+ choiceFile() {
+ this.uploadChoiceDialogVisible = false
+ // 创建隐藏的文件输入框
+ const input = document.createElement('input')
+ input.type = 'file'
+ input.accept = 'image/*'
+ input.onchange = (e) => {
+ const file = e.target.files[0]
+ if (file) {
+ this.handleFileUpload(file)
+ }
+ }
+ input.click()
+ },
+ // 处理文件上传
+ handleFileUpload(file) {
+ // 验证文件类型
+ const isImage = file.type.startsWith('image/')
+ if (!isImage) {
+ this.$message.error('请上传图片文件')
+ return
+ }
+ // 验证文件大小（限制10MB）
+ const isLt10M = file.size / 1024 / 1024 < 10
+ if (!isLt10M) {
+ this.$message.error('图片大小不能超过10MB')
+ return
+ }
+ // 生成预览URL
+ const imageUrl = URL.createObjectURL(file)
+ this.empBaseInfoImageUrl = imageUrl
+ // 读取文件为Base64
+ const reader = new FileReader()
+ reader.onload = (e) => {
+ this.empBaseInfoForm.imagePath = e.target.result
+ this.$message.success('照片上传成功')
+ }
+ reader.readAsDataURL(file)
},
// 打开摄像头
openCamera() {
@@ -2646,6 +2718,42 @@
}
}
+// 上传方式选择容器
+.upload-choice-container {
+ display: flex;
+ justify-content: space-around;
+ padding: 20px 0;
+
+ .upload-choice-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 120px;
+ height: 120px;
+ border: 2px dashed #d9d9d9;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.3s;
+
+ &:hover {
+ border-color: #409eff;
+ background-color: #f5f7fa;
+ }
+
+ i {
+ font-size: 40px;
+ color: #409eff;
+ margin-bottom: 10px;
+ }
+
+ span {
+ font-size: 14px;
+ color: #606266;
+ }
+ }
+}
+
// 摄像头容器
.camera-container {
text-align: center;
--
Gitblit v1.8.0