feat:更新上传图片和视频组件

src/views/ledger/detail[id].vue

@@ -47,19 +47,25 @@
       </el-form-item>
 
       <el-form-item label="图片">
-        <upload-image v-model="ledgerStore.currentLedgerRecord.imageUrl"
-                      :image-limit="1"
-                      :service-url="fileServiceUrl"
-                      :service-file-root-path="serviceFileRootPath"
-                      :image-path="ledgerStore.ledgerImagePath"/>
-
-        <el-image
-            v-if="ledgerStore.currentLedgerRecord.imageUrl"
-            :src="serviceFileRootPath + ledgerStore.currentLedgerRecord.imageUrl"
-            :preview-src-list="[serviceFileRootPath + ledgerStore.currentLedgerRecord.imageUrl]"
-            show-progress
-            fit="cover"
-        />
+        <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,25 +86,66 @@
 </template>
 
 <script lang="ts" setup>
-import { UploadImage } from 'vue3-common'
 import { AmountInput } from 'vue3-common'
 import { useLedgerStore } from '@/store/ledger.ts'
 import { useAppStore } from '@/store/app.ts'
-import { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { ledgerRules } from '@/utils/element/elRules.ts'
 import { onMounted, reactive, ref } from 'vue'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+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'
 
 const formRef = ref()
 const rules = reactive<FormRules>(ledgerRules)
+const imageFileList = ref<UploadUserFile[]>([])
+
 const ledgerStore = useLedgerStore()
 const appStore = useAppStore()
 
 onMounted(async () => {
   appStore.isShowMobileBack = true
+
+  initImageFileList()
 })
 
+const initImageFileList = () => {
+  imageFileList.value = []
+  const { imageUrl } = ledgerStore.currentLedgerRecord
+  if (imageUrl) {
+    imageFileList.value.push({
+      name: 'image',
+      url: `${AListUrl}${imageUrl}`
+    })
+  }
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
+  return beforeUploadImage(rawFile)
+}
+
+const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
+  return await httpRequestFile(ledgerStore.ledgerImagePath, options)
+}
+
+const handleSuccess = (response: string) => {
+  ledgerStore.currentLedgerRecord.imageUrl = `p${response}`
+}
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning('最多上传1张图片')
+}
+
+const handleRemove: UploadProps['onRemove'] = () => {
+  ledgerStore.currentLedgerRecord.imageUrl = ''
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = () => {
+  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
+}
+
 /**
  * 点击确认按钮
  */