fix: 文件上传压缩功能修复。
This commit is contained in:
466
src/pages.json
466
src/pages.json
@@ -62,12 +62,6 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/health/statistic/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/mine",
|
"path": "pages/mine",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -75,160 +69,6 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/health/doctorRecord/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "就医记录"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/doctorRecord/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "就医记录"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/doctorRecord/costList",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "费用明细"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/doctorRecord/costAddEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "费用明细"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/healthRecord/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "健康档案"
|
|
||||||
}
|
|
||||||
} ,
|
|
||||||
{
|
|
||||||
"path": "pages/health/healthRecord/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "健康档案"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/healthRecord/details",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "档案统计"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/marRecord/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "用药记录"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/marRecord/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "用药记录"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicineBasic/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "药品基础信息"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicineBasic/details",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "药品基础信息详情"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicineBasic/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "药品基础信息"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicineStockIn/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "药品入库清单"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicineStockIn/details",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "药品入库清单详情"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicineStockIn/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "药品入库清单"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/health/medicineStock/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "药品实时库存"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/temperatureRecord/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "体温记录"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/temperatureRecord/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "体温记录"
|
|
||||||
}
|
|
||||||
} ,
|
|
||||||
{
|
|
||||||
"path": "pages/health/processRecord/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "档案过程记录"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/processRecord/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "过程记录"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/heightWeightRecord/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "身高体重记录"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/milkPowderRecord/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "吃奶记录"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/milkPowderRecord/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "吃奶记录"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
{
|
|
||||||
"path": "pages/health/heightWeightRecord/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "身高体重记录"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/health/person/list",
|
"path": "pages/health/person/list",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -256,83 +96,44 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/health/statistic/doctorStatistic/index",
|
"path": "pages/health/temperatureRecord/list",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "就医统计"
|
"navigationBarTitleText": "体温记录"
|
||||||
}
|
}
|
||||||
} ,
|
}
|
||||||
|
,
|
||||||
{
|
{
|
||||||
"path": "pages/health/statistic/healthStatistic/index",
|
"path": "pages/health/temperatureRecord/addEdit",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "档案统计"
|
"navigationBarTitleText": "体温记录"
|
||||||
|
}
|
||||||
|
} ,
|
||||||
|
{
|
||||||
|
"path": "pages/health/heightWeightRecord/list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "身高体重记录"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
"path": "pages/health/milkPowderRecord/addEdit",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "吃奶记录"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/health/statistic/healthScreen/index",
|
"path": "pages/health/milkPowderRecord/list",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "健康总览态势"
|
"navigationBarTitleText": "吃奶记录"
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
{
|
,
|
||||||
"path": "pages/health/statistic/recordScreen/index",
|
{
|
||||||
"style": {
|
"path": "pages/health/heightWeightRecord/addEdit",
|
||||||
"navigationBarTitleText": "健康档案态势"
|
"style": {
|
||||||
}
|
"navigationBarTitleText": "身高体重记录"
|
||||||
} ,
|
}
|
||||||
{
|
},
|
||||||
"path": "pages/health/statistic/marStatistic/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "用药统计"
|
|
||||||
}
|
|
||||||
} ,
|
|
||||||
{
|
|
||||||
"path": "pages/health/statistic/temperatureStatistic/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "体温统计"
|
|
||||||
}
|
|
||||||
} ,
|
|
||||||
{
|
|
||||||
"path": "pages/health/statistic/milkPowderStatistic/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "吃奶量统计"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicationPlan/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "用药计划"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicationPlan/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "用药计划"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/chronicDisease/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "慢性疾病档案"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/chronicDisease/addEdit",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "慢性疾病档案"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/chronicDisease/details",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "慢性疾病详情"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/health/medicationTask/list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "服药任务"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/health/healthTags/list",
|
"path": "pages/health/healthTags/list",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -393,9 +194,212 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/statistic",
|
||||||
|
"name": "statistic",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "index",
|
||||||
|
"style": { "navigationBarTitleText": "统计分析" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "doctorStatistic/index",
|
||||||
|
"style": { "navigationBarTitleText": "就医统计" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "healthStatistic/index",
|
||||||
|
"style": { "navigationBarTitleText": "档案统计" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "healthScreen/index",
|
||||||
|
"style": { "navigationBarTitleText": "健康总览态势" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "recordScreen/index",
|
||||||
|
"style": { "navigationBarTitleText": "健康档案态势" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "marStatistic/index",
|
||||||
|
"style": { "navigationBarTitleText": "用药统计" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "temperatureStatistic/index",
|
||||||
|
"style": { "navigationBarTitleText": "体温统计" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "milkPowderStatistic/index",
|
||||||
|
"style": { "navigationBarTitleText": "吃奶量统计" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/medicineBasic",
|
||||||
|
"name": "medicineBasic",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "药品基础信息" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "details",
|
||||||
|
"style": { "navigationBarTitleText": "药品基础信息详情" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "药品基础信息" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/medicineStockIn",
|
||||||
|
"name": "medicineStockIn",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "药品入库清单" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "details",
|
||||||
|
"style": { "navigationBarTitleText": "药品入库清单详情" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "药品入库清单" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/medicineStock",
|
||||||
|
"name": "medicineStock",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "药品实时库存" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/medicationPlan",
|
||||||
|
"name": "medicationPlan",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "用药计划" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "用药计划" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/medicationTask",
|
||||||
|
"name": "medicationTask",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "服药任务" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/marRecord",
|
||||||
|
"name": "marRecord",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "用药记录" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "用药记录" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/doctorRecord",
|
||||||
|
"name": "doctorRecord",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "就医记录" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "就医记录" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "costList",
|
||||||
|
"style": { "navigationBarTitleText": "费用明细" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "costAddEdit",
|
||||||
|
"style": { "navigationBarTitleText": "费用明细" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/healthRecord",
|
||||||
|
"name": "healthRecord",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "健康档案" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "健康档案" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "details",
|
||||||
|
"style": { "navigationBarTitleText": "档案统计" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/processRecord",
|
||||||
|
"name": "processRecord",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "档案过程记录" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "过程记录" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/health/chronicDisease",
|
||||||
|
"name": "chronicDisease",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "list",
|
||||||
|
"style": { "navigationBarTitleText": "慢性疾病档案" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "addEdit",
|
||||||
|
"style": { "navigationBarTitleText": "慢性疾病档案" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "details",
|
||||||
|
"style": { "navigationBarTitleText": "慢性疾病详情" }
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
],
|
],
|
||||||
|
"preloadRule": {
|
||||||
|
"pages/health/index": {
|
||||||
|
"network": "all",
|
||||||
|
"packages": ["medicineBasic", "medicineStockIn", "medicineStock", "medicationPlan", "medicationTask", "marRecord", "doctorRecord", "healthRecord", "processRecord", "chronicDisease"]
|
||||||
|
},
|
||||||
|
"pages/health/statistic/index": {
|
||||||
|
"network": "all",
|
||||||
|
"packages": ["statistic"]
|
||||||
|
}
|
||||||
|
},
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"color": "#000000",
|
"color": "#000000",
|
||||||
"selectedColor": "#000000",
|
"selectedColor": "#000000",
|
||||||
|
|||||||
@@ -125,6 +125,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { getActivity, addActivity, updateActivity, uploadFile } from '@/api/health/activity'
|
import { getActivity, addActivity, updateActivity, uploadFile } from '@/api/health/activity'
|
||||||
import config from '@/config'
|
import config from '@/config'
|
||||||
|
import { compressImage } from '@/utils/imageCompress'
|
||||||
const { proxy } = getCurrentInstance()
|
const { proxy } = getCurrentInstance()
|
||||||
import { getDicts } from '@/api/system/dict/data.js'
|
import { getDicts } from '@/api/system/dict/data.js'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
@@ -400,30 +401,32 @@ function chooseImage() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function uploadImages(paths, index) {
|
async function uploadImages(paths, index) {
|
||||||
if (index >= paths.length) {
|
if (index >= paths.length) {
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
uploading.value = true
|
uploading.value = true
|
||||||
// H5 端 mask: true 会让页面无法点击,一旦上传出问题会导致用户被“锁住”
|
uni.showLoading({ title: `处理中 ${index + 1}/${paths.length}`, mask: false })
|
||||||
// 这里改为 mask: false,允许用户取消(会提示正在上传)
|
try {
|
||||||
uni.showLoading({ title: `上传中 ${index + 1}/${paths.length}`, mask: false })
|
// 上传前先压缩(超过 500KB 才压,避免小图多走一道)
|
||||||
uploadFile({
|
const compressedPath = await compressImage(paths[index])
|
||||||
filePath: paths[index],
|
uni.showLoading({ title: `上传中 ${index + 1}/${paths.length}`, mask: false })
|
||||||
name: 'file'
|
const res = await uploadFile({
|
||||||
}).then(res => {
|
filePath: compressedPath,
|
||||||
|
name: 'file'
|
||||||
|
})
|
||||||
const url = (res.data && res.data.url) || res.fileName || res.url
|
const url = (res.data && res.data.url) || res.fileName || res.url
|
||||||
if (url) {
|
if (url) {
|
||||||
attachmentList.value.push(normalizeAttachmentUrl(url))
|
attachmentList.value.push(normalizeAttachmentUrl(url))
|
||||||
}
|
}
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
uploadImages(paths, index + 1)
|
uploadImages(paths, index + 1)
|
||||||
}).catch(() => {
|
} catch (e) {
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
proxy.$refs['uToast'].show({ message: `第 ${index + 1} 张上传失败`, type: 'error' })
|
proxy.$refs['uToast'].show({ message: `第 ${index + 1} 张上传失败`, type: 'error' })
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteImage(index) {
|
function deleteImage(index) {
|
||||||
|
|||||||
@@ -114,6 +114,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { getDoctorRecord, addDoctorRecord, updateDoctorRecord, uploadFile } from '@/api/health/doctorRecord'
|
import { getDoctorRecord, addDoctorRecord, updateDoctorRecord, uploadFile } from '@/api/health/doctorRecord'
|
||||||
import config from '@/config'
|
import config from '@/config'
|
||||||
|
import { compressImage } from '@/utils/imageCompress'
|
||||||
import { listPerson } from '@/api/health/person'
|
import { listPerson } from '@/api/health/person'
|
||||||
import { listHealthRecord } from '@/api/health/healthRecord'
|
import { listHealthRecord } from '@/api/health/healthRecord'
|
||||||
const { proxy } = getCurrentInstance()
|
const { proxy } = getCurrentInstance()
|
||||||
@@ -457,30 +458,32 @@ function chooseImage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 递归上传图片
|
// 递归上传图片
|
||||||
function uploadImages(paths, index) {
|
async function uploadImages(paths, index) {
|
||||||
if (index >= paths.length) {
|
if (index >= paths.length) {
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
uploading.value = true
|
uploading.value = true
|
||||||
// H5 端 mask: true 会让页面无法点击,一旦上传出问题会导致用户被“锁住”
|
uni.showLoading({ title: `处理中 ${index + 1}/${paths.length}`, mask: false })
|
||||||
// 这里改为 mask: false,允许用户取消(会提示正在上传)
|
try {
|
||||||
uni.showLoading({ title: `上传中 ${index + 1}/${paths.length}`, mask: false })
|
// 上传前先压缩(超过 500KB 才压,避免小图多走一道)
|
||||||
uploadFile({
|
const compressedPath = await compressImage(paths[index])
|
||||||
filePath: paths[index],
|
uni.showLoading({ title: `上传中 ${index + 1}/${paths.length}`, mask: false })
|
||||||
name: 'file'
|
const res = await uploadFile({
|
||||||
}).then(res => {
|
filePath: compressedPath,
|
||||||
|
name: 'file'
|
||||||
|
})
|
||||||
const url = (res.data && res.data.url) || res.fileName || res.url
|
const url = (res.data && res.data.url) || res.fileName || res.url
|
||||||
if (url) {
|
if (url) {
|
||||||
attachmentList.value.push(normalizeAttachmentUrl(url))
|
attachmentList.value.push(normalizeAttachmentUrl(url))
|
||||||
}
|
}
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
uploadImages(paths, index + 1)
|
uploadImages(paths, index + 1)
|
||||||
}).catch(() => {
|
} catch (e) {
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
proxy.$refs['uToast'].show({ message: `第 ${index + 1} 张上传失败`, type: 'error' })
|
proxy.$refs['uToast'].show({ message: `第 ${index + 1} 张上传失败`, type: 'error' })
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除图片
|
// 删除图片
|
||||||
|
|||||||
@@ -177,6 +177,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {getMedicineBasic, addMedicineBasic, updateMedicineBasic, uploadFile } from '@/api/health/medicineBasic'
|
import {getMedicineBasic, addMedicineBasic, updateMedicineBasic, uploadFile } from '@/api/health/medicineBasic'
|
||||||
import config from '@/config'
|
import config from '@/config'
|
||||||
|
import { compressImage } from '@/utils/imageCompress'
|
||||||
const { proxy } = getCurrentInstance()
|
const { proxy } = getCurrentInstance()
|
||||||
import { getDicts } from '@/api/system/dict/data.js'
|
import { getDicts } from '@/api/system/dict/data.js'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
@@ -617,19 +618,21 @@ function chooseImage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 递归上传图片
|
// 递归上传图片
|
||||||
function uploadImages(paths, index) {
|
async function uploadImages(paths, index) {
|
||||||
if (index >= paths.length) {
|
if (index >= paths.length) {
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
uploading.value = true
|
uploading.value = true
|
||||||
// H5 端 mask: true 会让页面无法点击,一旦上传出问题会导致用户被“锁住”
|
uni.showLoading({ title: `处理中 ${index + 1}/${paths.length}`, mask: false })
|
||||||
// 这里改为 mask: false,允许用户取消(会提示正在上传)
|
try {
|
||||||
uni.showLoading({ title: `上传中 ${index + 1}/${paths.length}`, mask: false })
|
// 上传前先压缩(超过 500KB 才压,避免小图多走一道)
|
||||||
uploadFile({
|
const compressedPath = await compressImage(paths[index])
|
||||||
filePath: paths[index],
|
uni.showLoading({ title: `上传中 ${index + 1}/${paths.length}`, mask: false })
|
||||||
name: 'file'
|
const res = await uploadFile({
|
||||||
}).then(res => {
|
filePath: compressedPath,
|
||||||
|
name: 'file'
|
||||||
|
})
|
||||||
// 打印返回数据,便于调试
|
// 打印返回数据,便于调试
|
||||||
console.log('==== upload response ====', JSON.stringify(res))
|
console.log('==== upload response ====', JSON.stringify(res))
|
||||||
// 兼容多种返回格式
|
// 兼容多种返回格式
|
||||||
@@ -649,11 +652,11 @@ function uploadImages(paths, index) {
|
|||||||
}
|
}
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
uploadImages(paths, index + 1)
|
uploadImages(paths, index + 1)
|
||||||
}).catch(() => {
|
} catch (e) {
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
proxy.$refs['uToast'].show({ message: `第 ${index + 1} 张上传失败`, type: 'error' })
|
proxy.$refs['uToast'].show({ message: `第 ${index + 1} 张上传失败`, type: 'error' })
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除图片
|
// 删除图片
|
||||||
|
|||||||
171
src/utils/imageCompress.ts
Normal file
171
src/utils/imageCompress.ts
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
/**
|
||||||
|
* 跨端图片压缩工具
|
||||||
|
*
|
||||||
|
* 用途:上传附件前压缩图片,避免大图(特别是手机原图 4MB+)导致上传卡死
|
||||||
|
*
|
||||||
|
* - H5:用 Canvas 重绘 + toDataURL('image/jpeg', quality)
|
||||||
|
* - 小程序/APP:用 uni.compressImage API(quality + compressedWidth)
|
||||||
|
*
|
||||||
|
* 策略:
|
||||||
|
* - 原图小于 500KB 不压(避免无谓耗时)
|
||||||
|
* - 最大宽度限制 1280px(横屏照片)或按比例缩放
|
||||||
|
* - JPEG 质量 0.75(体积约 1/5 ~ 1/10,肉眼几乎无差)
|
||||||
|
* - 透明 PNG 也压成 JPEG(牺牲透明通道换取体积),如需透明可改 quality 调用
|
||||||
|
*
|
||||||
|
* 用法:
|
||||||
|
* import { compressImage } from '@/utils/imageCompress'
|
||||||
|
* const compressed = await compressImage(filePath)
|
||||||
|
* uploadFile({ filePath: compressed, ... })
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 不压缩的体积阈值(字节),800KB(小图直接跳过,避免无谓耗时) */
|
||||||
|
const SKIP_COMPRESS_SIZE = 800 * 1024
|
||||||
|
/** 最大边长,超过按比例缩放(保留宽高比)。1920px 兼顾清晰度与体积 */
|
||||||
|
const MAX_SIDE = 1920
|
||||||
|
/** JPEG 压缩质量 0~1。0.85 可保证医疗单据/药品说明书文字清晰 */
|
||||||
|
const JPEG_QUALITY = 0.85
|
||||||
|
|
||||||
|
/**
|
||||||
|
* H5 端压缩:Canvas 重绘 + toBlob
|
||||||
|
*/
|
||||||
|
function compressH5(filePath: string): Promise<string> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const img = new Image()
|
||||||
|
img.crossOrigin = 'anonymous'
|
||||||
|
img.onload = () => {
|
||||||
|
try {
|
||||||
|
// 计算缩放后的尺寸
|
||||||
|
let { width, height } = img
|
||||||
|
const longSide = Math.max(width, height)
|
||||||
|
if (longSide > MAX_SIDE) {
|
||||||
|
const scale = MAX_SIDE / longSide
|
||||||
|
width = Math.round(width * scale)
|
||||||
|
height = Math.round(height * scale)
|
||||||
|
}
|
||||||
|
// 创建 canvas 重绘
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
canvas.width = width
|
||||||
|
canvas.height = height
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
if (!ctx) {
|
||||||
|
resolve(filePath) // 极端情况降级到原图
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 白底(防止 PNG 透明通道转 JPEG 后变黑)
|
||||||
|
ctx.fillStyle = '#ffffff'
|
||||||
|
ctx.fillRect(0, 0, width, height)
|
||||||
|
ctx.drawImage(img, 0, 0, width, height)
|
||||||
|
// 转成 Blob 返回 ObjectURL(避免 base64 体积膨胀)
|
||||||
|
canvas.toBlob(
|
||||||
|
(blob) => {
|
||||||
|
if (!blob) {
|
||||||
|
resolve(filePath)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 释放旧的 ObjectURL(如果是 blob: URL)
|
||||||
|
if (filePath.startsWith('blob:')) {
|
||||||
|
try { URL.revokeObjectURL(filePath) } catch (e) { /* ignore */ }
|
||||||
|
}
|
||||||
|
resolve(URL.createObjectURL(blob))
|
||||||
|
},
|
||||||
|
'image/jpeg',
|
||||||
|
JPEG_QUALITY
|
||||||
|
)
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('[imageCompress] H5 压缩失败,降级原图', err)
|
||||||
|
resolve(filePath)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img.onerror = (err) => {
|
||||||
|
console.warn('[imageCompress] H5 图片加载失败,降级原图', err)
|
||||||
|
resolve(filePath)
|
||||||
|
}
|
||||||
|
img.src = filePath
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 小程序/APP 端压缩:uni.compressImage
|
||||||
|
*/
|
||||||
|
function compressMP(filePath: string): Promise<string> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
uni.compressImage({
|
||||||
|
src: filePath,
|
||||||
|
quality: Math.round(JPEG_QUALITY * 100), // 75
|
||||||
|
compressedWidth: MAX_SIDE,
|
||||||
|
success: (res) => resolve(res.tempFilePath),
|
||||||
|
fail: (err) => {
|
||||||
|
console.warn('[imageCompress] uni.compressImage 失败,降级原图', err)
|
||||||
|
resolve(filePath) // 失败降级
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件大小(字节)。
|
||||||
|
* - H5: blob: / data: URL 用 fetch 解析
|
||||||
|
* - 小程序/APP: uni.getFileInfo
|
||||||
|
*/
|
||||||
|
function getFileSize(filePath: string): Promise<number> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
// #ifdef H5
|
||||||
|
try {
|
||||||
|
if (filePath.startsWith('blob:') || filePath.startsWith('data:')) {
|
||||||
|
fetch(filePath)
|
||||||
|
.then(r => r.blob())
|
||||||
|
.then(b => resolve(b.size))
|
||||||
|
.catch(() => resolve(0))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} catch (e) { /* fallthrough */ }
|
||||||
|
resolve(0) // 无法获取则不压缩(保守策略)
|
||||||
|
return
|
||||||
|
// #endif
|
||||||
|
// #ifndef H5
|
||||||
|
uni.getFileInfo({
|
||||||
|
filePath,
|
||||||
|
success: (res) => resolve(res.size),
|
||||||
|
fail: () => resolve(0)
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 压缩图片入口(跨端)
|
||||||
|
* @param filePath 图片临时路径
|
||||||
|
* @returns 压缩后的图片路径(如失败则返回原路径)
|
||||||
|
*/
|
||||||
|
export async function compressImage(filePath: string): Promise<string> {
|
||||||
|
if (!filePath) return filePath
|
||||||
|
try {
|
||||||
|
// 检查体积,小图直接跳过
|
||||||
|
const size = await getFileSize(filePath)
|
||||||
|
if (size > 0 && size < SKIP_COMPRESS_SIZE) {
|
||||||
|
return filePath
|
||||||
|
}
|
||||||
|
// #ifdef H5
|
||||||
|
return await compressH5(filePath)
|
||||||
|
// #endif
|
||||||
|
// #ifndef H5
|
||||||
|
return await compressMP(filePath)
|
||||||
|
// #endif
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('[imageCompress] 压缩过程异常,降级原图', err)
|
||||||
|
return filePath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量压缩图片(串行执行,避免一次性占用过多内存)
|
||||||
|
* @param filePaths 图片路径数组
|
||||||
|
* @returns 压缩后的路径数组(与入参顺序一致)
|
||||||
|
*/
|
||||||
|
export async function compressImages(filePaths: string[]): Promise<string[]> {
|
||||||
|
const result: string[] = []
|
||||||
|
for (const p of filePaths) {
|
||||||
|
result.push(await compressImage(p))
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user