4 changed files with 490 additions and 1 deletions
@ -0,0 +1,291 @@ |
|||
# 上传功能按环境拆分：本地用 van-uploader，生产强制现场拍摄/录制 |
|||
|
|||
## Context（背景） |
|||
|
|||
[NosDetailMaterialsTab.vue](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/nos/components/NosDetailMaterialsTab.vue) 第 48-63 行使用单个 `van-uploader` 同时处理图片/视频/PDF。生产环境（beeworks 容器/深 i 企）内合规要求：**线上不能用相册的图片和视频，必须是现场拍摄和录制**，且**拍照必须带水印与经纬度**。 |
|||
|
|||
按环境拆分上传入口： |
|||
|
|||
- **开发环境（dev）**：保留现有 `van-uploader` 不变（支持图片/视频/PDF）。 |
|||
- **生产环境（prod）**：只允许两种方式，均来自设备现场采集： |
|||
1. **拍照** → [`w6s.image.takePhotoAndAddWaterMark`](https://open.beeworks.cn/js-sdk/image.html#%E5%9B%BE%E7%89%87%E6%B7%BB%E5%8A%A0%E6%B0%B4%E5%8D%B0)（`timeEnable: true, locationEnable: true` 自动叠加时间戳与经纬度水印） |
|||
2. **录制视频** → [`w6s.video.startVideoRecoder`](https://open.beeworks.cn/js-sdk/video.html#%E8%A7%86%E9%A2%91%E5%BD%95%E5%88%B6) |
|||
3. 上传到后端 → [`w6s.file.upload`](https://open.beeworks.cn/js-sdk/file.html#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0)（原生 FileTransfer，直接传本地路径，无需 base64 转换） |
|||
4. 经纬度获取（可选） → [`w6s.location.getLocation`](https://open.beeworks.cn/js-sdk/location.html) |
|||
|
|||
> **关键约束**：生产环境**不提供**相册选择、文件选择器入口，避免用户上传已有图片/视频。PDF 上传在生产环境是否保留待用户确认（见开放问题 1）。 |
|||
|
|||
## 关键复用点 |
|||
|
|||
- **环境判断**：[src/config/env.js](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/config/env.js) 的 `appEnv`，生产值为 `'prod'`。 |
|||
- **w6s SDK 导入**：`import * as w6s from 'szient-js-sdk'`（参考 [qrCode.vue#L42](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/qr/qrCode.vue#L42)）。鉴权已在 [enterpriseHome.vue#L295-L344](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/home/enterpriseHome.vue#L295-L344) 完成。 |
|||
- **后端上传地址**：[src/util/fileUpload.js](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/util/fileUpload.js) 中 `/app-enf/common/file/upload`，完整 URL 为 `${baseUrl}/app-enf/common/file/upload`。 |
|||
- **认证头**：[src/http/http.js#L26-L31](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/http/http.js#L26-L31) 拦截器加 `Authorization: Bearer + token` 与 `clientid: 9e6eb24cd4e169a98b0d2cd8034d877b`，`w6s.file.upload` 需手动传入。 |
|||
- **URL 拼接**：复用 [src/util/fileUrl.js](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/util/fileUrl.js) 的 `toFullFileUrl`。 |
|||
- **全局状态**：`$globalStore.useCommon`（取 `token`、`enterpriseName`）。 |
|||
|
|||
## 实施步骤 |
|||
|
|||
### 步骤 1：新建 `src/util/w6sMedia.js` |
|||
|
|||
Promise 化封装 4 个方法： |
|||
|
|||
```js |
|||
import * as w6s from 'szient-js-sdk' |
|||
import { baseUrl } from '@/config/env' |
|||
import { $globalStore } from '@/common/globalStore' |
|||
|
|||
// 1. 拍照并加水印（时间戳 + 经纬度自动叠加） |
|||
export const takePhotoWithWaterMark = ({ |
|||
content = '', |
|||
fontSize = 14, |
|||
color = '#FF5858', |
|||
timeEnable = true, |
|||
locationEnable = true, |
|||
} = {}) => new Promise((resolve, reject) => { |
|||
w6s.image.takePhotoAndAddWaterMark({ |
|||
content, fontSize, color, |
|||
markDisable: false, |
|||
timeEnable, locationEnable, |
|||
success: resolve, |
|||
fail: reject, |
|||
}) |
|||
}) |
|||
|
|||
// 2. 录制视频 |
|||
export const startVideoRecorder = ({ |
|||
duration = 60, |
|||
quality = 1, // 0 高清 / 1 一般 / 2 流畅 |
|||
front = false, |
|||
syncSystemAlbum = false, |
|||
} = {}) => new Promise((resolve, reject) => { |
|||
w6s.video.startVideoRecoder({ |
|||
duration, |
|||
quality, |
|||
front, |
|||
sync_system_album: syncSystemAlbum, |
|||
success: resolve, |
|||
fail: reject, |
|||
}) |
|||
}) |
|||
|
|||
// 3. 获取定位（可选，用于单独保存经纬度元数据） |
|||
export const getLocation = () => new Promise((resolve, reject) => { |
|||
w6s.location.getLocation({ success: resolve, fail: reject }) |
|||
}) |
|||
|
|||
// 4. 上传本地文件到后端 /app-enf/common/file/upload |
|||
export const uploadLocalFileToBackend = ({ |
|||
fileURL, // SDK 返回的本地路径 |
|||
fileName = 'upload', |
|||
mimeType = 'image/jpeg', |
|||
}) => new Promise((resolve, reject) => { |
|||
const token = $globalStore.useCommon.token || '' |
|||
// w6s.file.upload 需要完整 URL |
|||
const api = `${baseUrl}/app-enf/common/file/upload` |
|||
const server = /^https?:/.test(api) ? api : `${window.location.origin}${api}` |
|||
|
|||
const opts = new window.FileUploadOptions() |
|||
opts.fileKey = 'file' |
|||
opts.fileName = fileName |
|||
opts.mimeType = mimeType |
|||
opts.headers = { |
|||
'Authorization': token ? `Bearer ${token}` : '', |
|||
'clientid': '9e6eb24cd4e169a98b0d2cd8034d877b', |
|||
} |
|||
const fileIns = new w6s.file.upload(opts) |
|||
fileIns.upload({ |
|||
fileURL, |
|||
server, |
|||
trustAllHosts: false, |
|||
success: (res) => { |
|||
// Cordova FileTransfer 返回 res.response 为字符串 |
|||
try { |
|||
const parsed = typeof res.response === 'string' ? JSON.parse(res.response) : res.response |
|||
resolve(parsed) |
|||
} catch (e) { |
|||
resolve(res.response) |
|||
} |
|||
}, |
|||
fail: reject, |
|||
}) |
|||
}) |
|||
``` |
|||
|
|||
### 步骤 2：修改 `NosDetailMaterialsTab.vue` |
|||
|
|||
#### 2.1 新增引入 |
|||
|
|||
```js |
|||
import { appEnv } from '@/config/env' |
|||
import { |
|||
takePhotoWithWaterMark, |
|||
startVideoRecorder, |
|||
uploadLocalFileToBackend, |
|||
} from '@/util/w6sMedia' |
|||
|
|||
const isProd = computed(() => appEnv === 'prod') |
|||
const showUploadAction = ref(false) |
|||
const activeUploadItem = ref(null) |
|||
const uploadActions = [ |
|||
{ name: '拍照（带水印与经纬度）' }, |
|||
{ name: '录制视频' }, |
|||
] |
|||
``` |
|||
|
|||
#### 2.2 模板改造（替换第 47-64 行） |
|||
|
|||
```html |
|||
<div class="material-media-edit" v-else> |
|||
<!-- 开发环境：原 van-uploader 不变 --> |
|||
<van-uploader |
|||
v-if="!isProd" |
|||
v-model="item.fileList" |
|||
multiple |
|||
:max-count="20" |
|||
:max-size="200 * 1024 * 1024" |
|||
accept="image/*,video/*,.pdf" |
|||
:after-read="onAfterReadImage" |
|||
:before-read="onBeforeRead" |
|||
@oversize="onOversize" |
|||
> |
|||
<template #default> |
|||
<div class="uploader-custom-btn"> |
|||
<van-icon name="photograph" size="24" color="#dcdee0" /> |
|||
</div> |
|||
</template> |
|||
</van-uploader> |
|||
|
|||
<!-- 生产环境：自定义上传按钮 --> |
|||
<div v-else class="uploader-custom-btn" @click="onOpenUploadAction(item)"> |
|||
<van-icon name="photograph" size="24" color="#dcdee0" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 与现有 van-popup 同级 --> |
|||
<van-action-sheet |
|||
v-model:show="showUploadAction" |
|||
:actions="uploadActions" |
|||
cancel-text="取消" |
|||
close-on-click-action |
|||
@select="onSelectUploadAction" |
|||
/> |
|||
``` |
|||
|
|||
#### 2.3 脚本逻辑 |
|||
|
|||
```js |
|||
const onOpenUploadAction = (item) => { |
|||
if ((item.fileList?.length || 0) >= 20) { |
|||
showToast('已达到最多 20 个文件上限') |
|||
return |
|||
} |
|||
activeUploadItem.value = item |
|||
showUploadAction.value = true |
|||
} |
|||
|
|||
const onSelectUploadAction = ({ name }) => { |
|||
const item = activeUploadItem.value |
|||
if (!item) return |
|||
if (name === '拍照（带水印与经纬度）') onTakePhoto(item) |
|||
else if (name === '录制视频') onRecordVideo(item) |
|||
} |
|||
|
|||
// 拍照带水印 |
|||
const onTakePhoto = async (item) => { |
|||
try { |
|||
const watermarkContent = $globalStore.useCommon.enterpriseName || '深圳市行政执法监督码' |
|||
const res = await takePhotoWithWaterMark({ content: watermarkContent }) |
|||
await pushSdkFileToFileList(item, { |
|||
localPath: res.imageURL || res.key, |
|||
fileName: `photo-${Date.now()}.jpg`, |
|||
mimeType: 'image/jpeg', |
|||
isImage: true, |
|||
}) |
|||
} catch (err) { |
|||
console.error('w6s 拍照失败', err) |
|||
showToast('拍照失败或已取消') |
|||
} |
|||
} |
|||
|
|||
// 录制视频 |
|||
const onRecordVideo = async (item) => { |
|||
try { |
|||
const res = await startVideoRecorder({ duration: 60, quality: 1 }) |
|||
// res.info.video_path 是本地视频路径 |
|||
const info = res.info || res |
|||
await pushSdkFileToFileList(item, { |
|||
localPath: info.video_path, |
|||
fileName: `video-${Date.now()}.mp4`, |
|||
mimeType: 'video/mp4', |
|||
isImage: false, |
|||
}) |
|||
} catch (err) { |
|||
console.error('w6s 录制失败', err) |
|||
showToast('录制失败或已取消') |
|||
} |
|||
} |
|||
|
|||
// 通用：把本地文件上传后端 → 写入 fileList |
|||
const pushSdkFileToFileList = async (item, { localPath, fileName, mimeType, isImage }) => { |
|||
if (!localPath) return |
|||
const fileObj = { |
|||
url: '', |
|||
isImage, |
|||
status: 'uploading', |
|||
message: '上传中...', |
|||
} |
|||
item.fileList.push(fileObj) |
|||
try { |
|||
const res = await uploadLocalFileToBackend({ fileURL: localPath, fileName, mimeType }) |
|||
const data = res && res.data ? res.data : res |
|||
const filePath = typeof data === 'string' |
|||
? data |
|||
: (data && (data.data || data.url || data.fileUrl || data.path)) || '' |
|||
if (filePath) { |
|||
fileObj.url = toFullFileUrl(filePath) |
|||
fileObj.status = 'done' |
|||
fileObj.message = '' |
|||
} else { |
|||
fileObj.status = 'failed' |
|||
fileObj.message = '上传失败' |
|||
} |
|||
} catch (err) { |
|||
console.error('w6s 上传后端失败', err) |
|||
fileObj.status = 'failed' |
|||
fileObj.message = '上传失败' |
|||
} |
|||
} |
|||
``` |
|||
|
|||
> 注意：`$globalStore` 在该组件需确认已注入。若未注入，可改为 `import { $globalStore } from '@/common/globalStore'`（与 [http.js#L3](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/http/http.js#L3) 一致）。 |
|||
|
|||
## 待用户确认的开放问题 |
|||
|
|||
1. **PDF 上传在生产如何处理？** 你强调"线上不能用相册的图片和视频，必须现场拍摄/录制"。PDF 是文档，无法现场采集。请选择： |
|||
- (A) 生产环境**不支持 PDF**，只允许拍照和录制视频。 |
|||
- (B) 生产环境**保留 PDF**，用 `w6s.file.chooseFiles`（文件选择器）入口，作为 action-sheet 第 3 项。 |
|||
2. **水印文案**：默认"企业名称 || '深圳市行政执法监督码'"，是否需要加入其他信息（如执法人员姓名、时间）？ |
|||
3. **视频录制时长上限**：默认 60 秒，是否需要调整（例如 30 秒 / 120 秒）？ |
|||
4. **视频清晰度**：默认 `quality: 1`（一般），可选 0 高清 / 2 流畅。考虑到 200MB 上限，建议保持一般。 |
|||
5. **经纬度是否单独存储**：`takePhotoAndAddWaterMark` 的 `locationEnable: true` 已把经纬度叠加到照片水印。是否还需要在 `item.fileList` 元数据中单独保存经纬度（用于后端记录）？若需要，会在 `onTakePhoto` 中额外调 `getLocation()` 并保存。 |
|||
6. **文件上限**：现模板文案是"最多 30 个文件"但 `max-count` 为 20，本计划沿用 20。是否需要统一？ |
|||
|
|||
## 验证方式 |
|||
|
|||
1. **开发环境**（`VITE_APP_ENV=dev`）： |
|||
- 进入 NOS 详情材料 Tab 编辑态，确认仍显示原 van-uploader，可选图片/视频/PDF，上传后端成功。 |
|||
2. **生产环境**（`VITE_APP_ENV=prod`，beeworks 容器内）： |
|||
- 编辑态下点击上传按钮，弹出 action-sheet：拍照（带水印与经纬度）/ 录制视频 / 取消。 |
|||
- **拍照**：调起原生相机，拍完照片带时间戳+经纬度水印，自动上传后端，卡片显示缩略图。 |
|||
- **录制视频**：调起原生视频录制，录完自动上传后端，卡片显示视频缩略图（可点击预览）。 |
|||
- **无相册/文件选择入口**，确认不会出现从相册选择图片或视频的选项。 |
|||
- 文件数达 20 时点击按钮提示上限。 |
|||
3. 检查后端 `/app-enf/common/file/upload` 收到的 `file` 字段非空，返回 URL 正确写入 `item.fileList`，`status: 'done'`。 |
|||
4. 预览/删除等既有功能不受影响。 |
|||
|
|||
## 涉及文件 |
|||
|
|||
- 新增：`src/util/w6sMedia.js` |
|||
- 修改：`src/views/enterprise/nos/components/NosDetailMaterialsTab.vue`（模板 47-64 行 + script 新增方法） |
|||
- 复用：`src/config/env.js`、`src/util/fileUrl.js`、`src/common/globalStore.js`、`szient-js-sdk` |
|||
@ -0,0 +1,83 @@ |
|||
import * as w6s from 'szient-js-sdk' |
|||
import { baseUrl } from '@/config/env' |
|||
import { $globalStore } from '@/common/globalStore' |
|||
|
|||
// 拍照并加水印（时间戳 + 经纬度自动叠加到照片）
|
|||
export const takePhotoWithWaterMark = ({ |
|||
content = '', |
|||
fontSize = 14, |
|||
color = '#FF5858', |
|||
timeEnable = true, |
|||
locationEnable = true, |
|||
} = {}) => new Promise((resolve, reject) => { |
|||
w6s.image.takePhotoAndAddWaterMark({ |
|||
content, |
|||
fontSize, |
|||
color, |
|||
markDisable: false, |
|||
timeEnable, |
|||
locationEnable, |
|||
success: resolve, |
|||
fail: reject, |
|||
}) |
|||
}) |
|||
|
|||
// 录制视频
|
|||
export const startVideoRecorder = ({ |
|||
duration = 60, |
|||
quality = 1, // 0 高清 / 1 一般 / 2 流畅
|
|||
front = false, |
|||
syncSystemAlbum = false, |
|||
} = {}) => new Promise((resolve, reject) => { |
|||
w6s.video.startVideoRecoder({ |
|||
duration, |
|||
quality, |
|||
front, |
|||
sync_system_album: syncSystemAlbum, |
|||
success: resolve, |
|||
fail: reject, |
|||
}) |
|||
}) |
|||
|
|||
// 获取定位（经纬度）
|
|||
export const getLocation = () => new Promise((resolve, reject) => { |
|||
w6s.location.getLocation({ success: resolve, fail: reject }) |
|||
}) |
|||
|
|||
// 上传本地文件到后端 /app-enf/common/file/upload
|
|||
// 使用 w6s.file.upload（Cordova FileTransfer），直接传本地路径，无需 base64 转换
|
|||
export const uploadLocalFileToBackend = ({ |
|||
fileURL, |
|||
fileName = 'upload', |
|||
mimeType = 'image/jpeg', |
|||
}) => new Promise((resolve, reject) => { |
|||
const token = $globalStore.useCommon?.token || '' |
|||
// w6s.file.upload 需要完整 URL
|
|||
const api = `${baseUrl}/app-enf/common/file/upload` |
|||
const server = /^https?:/.test(api) ? api : `${window.location.origin}${api}` |
|||
|
|||
const opts = new window.FileUploadOptions() |
|||
opts.fileKey = 'file' |
|||
opts.fileName = fileName |
|||
opts.mimeType = mimeType |
|||
opts.headers = { |
|||
Authorization: token ? `Bearer ${token}` : '', |
|||
clientid: '9e6eb24cd4e169a98b0d2cd8034d877b', |
|||
} |
|||
const fileIns = new w6s.file.upload(opts) |
|||
fileIns.upload({ |
|||
fileURL, |
|||
server, |
|||
trustAllHosts: false, |
|||
success: (res) => { |
|||
// Cordova FileTransfer 返回 res.response 为字符串
|
|||
try { |
|||
const parsed = typeof res.response === 'string' ? JSON.parse(res.response) : res.response |
|||
resolve(parsed) |
|||
} catch (e) { |
|||
resolve(res.response) |
|||
} |
|||
}, |
|||
fail: reject, |
|||
}) |
|||
}) |
|||
Loading…
Reference in new issue