Cxx0822/sweet-hut-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:增加图片存储模式

Browse Source
This commit is contained in:
Cxx0822
2026-02-14 16:55:52 +08:00
parent 223a59cd8a
commit 4dc541da85
24 changed files with 333 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/bill/detail[id].vue
View File

@@ -89,10 +89,25 @@
</el-form-item>
<el-form-item label="账单图片">
<upload-image v-model="billStore.currentBillRecord.imageList"
:service-url="fileServiceUrl"
:service-file-root-path="serviceFileRootPath"
:image-path="billStore.billImagePath"/>
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:accept="acceptImageTypes"
:limit="3"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
请上传小于10M的图片
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
@@ -106,21 +121,31 @@
</template>
<script lang="ts" setup>
import { UploadImage, AmountInput } from 'vue3-common'
import { AmountInput } from 'vue3-common'
import { useBillStore } from '@/store/bill.ts'
import { useAppStore } from '@/store/app.ts'
import { Location, Document } from '@element-plus/icons-vue'
import { FormRules } from 'element-plus'
import { Location, Document, Plus } from '@element-plus/icons-vue'
import {
ElMessage,
ElMessageBox,
FormRules,
UploadProps,
UploadRawFile,
UploadRequestOptions,
UploadUserFile
} from 'element-plus'
import { billRecordRules } from '@/utils/element/elRules.ts'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { IBillCategory } from '@/types/bill.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
const formRef = ref()
const rules = reactive<FormRules>(billRecordRules)
const billStore = useBillStore()
const appStore = useAppStore()
const imageFileList = ref<UploadUserFile[]>([])
const billInfo = reactive({
billTypeList: [] as string[],
@@ -131,6 +156,7 @@ onMounted(async () => {
appStore.isShowMobileBack = true
await initBillRecord()
initImageFileList()
})
const initBillRecord = async () => {
@@ -157,6 +183,41 @@ const initBillRecord = async () => {
})
}
const initImageFileList = () => {
imageFileList.value = []
billStore.currentBillRecord.imageList.forEach((image) => {
imageFileList.value.push({
name: 'image',
url: image
})
})
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
return await httpRequestFile(billStore.billImagePath, options)
}
const handleSuccess = (response: string) => {
billStore.currentBillRecord.imageList.push(response)
}
const handleExceed: UploadProps['onExceed'] = () => {
ElMessage.warning('最多上传3张图片')
}
const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
billStore.currentBillRecord.imageList.splice(index, 1)
}
const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
/**
* 获取账单类型名称
* @param type 账单类型

5
src/views/food/recordForm.vue
View File

@@ -72,7 +72,6 @@ import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { foodRecordRules } from '@/utils/element/elRules.ts'
import { AListUrl } from '@/utils'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { useAppStore } from '@/store/app.ts'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
@@ -98,7 +97,7 @@ const initImageFileList = () => {
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
url: imageUrl
})
}
}
@@ -112,7 +111,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
}
const handleSuccess = (response: string) => {
foodStore.currentFoodRecord.imageUrl = `p${response}`
foodStore.currentFoodRecord.imageUrl = response
}
const handleExceed: UploadProps['onExceed'] = () => {

7
src/views/food/timeline.vue
View File

@@ -24,7 +24,7 @@
placement="top">
<div class="timeline-info card-item">
<span class="name">{{ item.name }}</span>
<el-image :src="AListUrl + item.imageUrl"
<el-image :src="`${item.imageUrl}${ThumbImageQuery}`"
fit="cover" alt="暂无成果"
@click="viewImageClick(item)">
<template #error>
@@ -45,7 +45,7 @@
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
import { useFoodStore } from '@/store/food.ts'
import { formatDate, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
import { AListUrl } from '@/utils'
import { ThumbImageQuery } from '@/utils'
import { onMounted } from 'vue'
import { showImagePreview } from 'vant'
import { IFoodRecord } from '@/types/food.ts'
@@ -58,8 +58,7 @@ onMounted(async () => {
})
const viewImageClick = (item: IFoodRecord) => {
const imageList = [AListUrl + item.imageUrl]
showImagePreview({ images: imageList, closeable: true })
showImagePreview({ images: [item.imageUrl], closeable: true })
}
const changeDateEvent = async (value: Date) => {

4
src/views/journal/detail[id].vue
View File

@@ -157,7 +157,7 @@ const initFileList = () => {
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
url: imageUrl
})
}
@@ -178,7 +178,7 @@ const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadReque
}
const handleImageSuccess = (response: string) => {
journalStore.currentJournal.imageUrl = `p${response}`
journalStore.currentJournal.imageUrl = response
}
const handleImageExceed: UploadProps['onExceed'] = () => {

4
src/views/ledger/detail[id].vue
View File

@@ -118,7 +118,7 @@ const initImageFileList = () => {
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
url: imageUrl
})
}
}
@@ -132,7 +132,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
}
const handleSuccess = (response: string) => {
ledgerStore.currentLedgerRecord.imageUrl = `p${response}`
ledgerStore.currentLedgerRecord.imageUrl = response
}
const handleExceed: UploadProps['onExceed'] = () => {

25
src/views/product/detail[id].vue
View File

@@ -97,7 +97,6 @@ import { useAppStore } from '@/store/app.ts'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { productRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'
import { AListUrl } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
@@ -115,6 +114,17 @@ onMounted(async () => {
initImageFileList()
})
const initImageFileList = () => {
imageFileList.value = []
const { imageUrl } = productStore.currentProduct
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: imageUrl
})
}
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
@@ -124,7 +134,7 @@ const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOpt
}
const handleSuccess = (response: string) => {
productStore.currentProduct.imageUrl = `p${response}`
productStore.currentProduct.imageUrl = response
}
const handleExceed: UploadProps['onExceed'] = () => {
@@ -139,17 +149,6 @@ const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
const initImageFileList = () => {
imageFileList.value = []
const { imageUrl } = productStore.currentProduct
if (imageUrl) {
imageFileList.value.push({
name: 'image',
url: `${AListUrl}${imageUrl}`
})
}
}
/**
* 点击确认按钮
*/

7
src/views/profile/index.vue
View File

@@ -3,7 +3,7 @@
<div class="profile-card">
<div class="avatar-wrapper">
<el-avatar
:src="serviceFileRootPath + userStore.userInfo.avatar"
:src="userStore.userInfo.avatar"
alt="用户头像" :size="80"
/>
@@ -102,7 +102,6 @@ import { useUserStore } from '@/store/user.ts'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
const userStore = useUserStore()
const appStore = useAppStore()
@@ -114,12 +113,12 @@ onMounted(() => {
const infoClick = () => {
appStore.isShowMobileBack = true
router.push('/home-home/profile/info')
router.push('/profile/info')
}
const passwordClick = () => {
// appStore.isShowMobileBack = true
// router.push('/home-home/profile/password')
// router.push('/profile/password')
}
const refreshClick = async () => {

83
src/views/profile/info.vue
View File

@@ -10,11 +10,25 @@
</el-form-item>
<el-form-item label="头像">
<upload-image v-model="userStore.userInfo.avatar"
:image-limit="1"
:service-url="fileServiceUrl"
:service-file-root-path="serviceFileRootPath"
:image-path="userStore.userImagePath"/>
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:accept="acceptImageTypes"
:limit="1"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
请上传小于10M的图片
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="性别">
@@ -80,17 +94,66 @@
</template>
<script setup lang="ts">
import { UploadImage } from 'vue3-common'
import { pcTextArr } from 'element-china-area-data'
import { useUserStore } from '@/store/user.ts'
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import {
ElMessage,
ElMessageBox,
FormInstance,
FormRules,
UploadProps,
UploadRawFile,
UploadRequestOptions, UploadUserFile
} from 'element-plus'
import { profileInfoRules } from '@/utils/element/elRules.ts'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>(profileInfoRules)
const imageFileList = ref<UploadUserFile[]>([])
onMounted(async () => {
initImageFileList()
})
const initImageFileList = () => {
imageFileList.value = []
const { avatar } = userStore.userInfo
if (avatar) {
imageFileList.value.push({
name: 'image',
url: avatar
})
}
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
return await httpRequestFile(userStore.userImagePath, options)
}
const handleSuccess = (response: string) => {
userStore.userInfo.avatar = response
}
const handleExceed: UploadProps['onExceed'] = () => {
ElMessage.warning('最多上传1张图片')
}
const handleRemove: UploadProps['onRemove'] = () => {
userStore.userInfo.avatar = ''
}
const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
const cancelClick = () => {
history.back()
@@ -98,7 +161,7 @@ const cancelClick = () => {
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate(async (valid, fields) => {
await formEl.validate(async (valid) => {
if (valid) {
await userStore.updateUser()
await userStore.queryUser()

87
src/views/travel/recordForm.vue
View File

@@ -29,29 +29,26 @@
</el-form-item>
<el-form-item label="图片">
<upload-image v-model="travelStore.currentTravelRecord.imageList"
:service-url="fileServiceUrl"
:image-limit="3"
:service-file-root-path="serviceFileRootPath"
:image-path="travelStore.travelImagePath"/>
<el-upload
v-model:file-list="imageFileList"
list-type="picture-card"
:accept="acceptImageTypes"
:limit="3"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
请上传小于10M的图片
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="视频">
<upload-video v-model="travelStore.currentTravelRecord.videoList"
:service-url="fileServiceUrl"
:image-limit="3"
:service-file-root-path="serviceFileRootPath"
:video-path="travelStore.travelVideoPath"
style="width: 100%;"/>
</el-form-item>
<div class="video-list">
<video v-for="(item, index) in travelStore.currentTravelRecord.videoList"
:key="index" controls style="width: 60%; min-height: 200px;">
<source :src="serviceFileRootPath + item" type="video/mp4">
您的浏览器不支持 HTML5 视频
</video>
</div>
</el-form>
<div class="button-container">
@@ -63,14 +60,15 @@
</template>
<script lang="ts" setup>
import { UploadImage, UploadVideo } from 'vue3-common'
import { useTravelStore } from '@/store/travel.ts'
import { ref, reactive, onMounted } from 'vue'
import { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { travelRecordRules } from '@/utils/element/elRules.ts'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { useAppStore } from '@/store/app.ts'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
const rules = reactive<FormRules>(travelRecordRules)
@@ -78,10 +76,49 @@ const formRef = ref()
const travelStore = useTravelStore()
const appStore = useAppStore()
const imageFileList = ref<UploadUserFile[]>([])
onMounted(async () => {
appStore.isShowMobileBack = true
initImageFileList()
})
const initImageFileList = () => {
imageFileList.value = []
travelStore.currentTravelRecord.imageList.forEach((image) => {
imageFileList.value.push({
name: 'image',
url: image
})
})
}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
return beforeUploadImage(rawFile)
}
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
return await httpRequestFile(travelStore.travelImagePath, options)
}
const handleSuccess = (response: string) => {
travelStore.currentTravelRecord.imageList.push(response)
}
const handleExceed: UploadProps['onExceed'] = () => {
ElMessage.warning('最多上传3张图片')
}
const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
travelStore.currentTravelRecord.imageList.splice(index, 1)
}
const beforeRemove: UploadProps['beforeRemove'] = () => {
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}
/**
* 点击确认按钮
*/