u

code/base-project/base-uniapp-main/src/pages-sub/file/index.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { UploadFile, UploadFileItem } from 'sard-uniapp'
+import { isImageUrl, isVideoUrl, toast } from 'sard-uniapp'
+import { aliyunpluploadApi, delSubRecordApi, searchdataApi } from '@/request/api'
+import { downloadFile, formatFileSize, imageCompress, isImage, uploadFileToAliyun } from '@/utils/file'
+import { isH5 } from '@/utils/platform'
+
+const fileList = ref<UploadFileItem[]>([])
+
+const isEdit = ref(true)
+
+const aliyunBucket = import.meta.env.VITE_ALIYUN_BUCKET
+const father = ref('')
+const moduleid = ref('')
+const cateid = ref('')
+
+onLoad((options) => {
+  father.value = options.father
+  moduleid.value = options.moduleid
+  cateid.value = options.cateid || ''
+
+  const edit = options.edit || '0'
+  isEdit.value = edit === '1'
+
+  nextTick(() => {
+    loadFileData()
+  })
+})
+
+async function loadFileData() {
+  let searchcondition = ` father = '${father.value}' and mx_moduleid = '${moduleid.value}'`
+  if (cateid.value !== '') {
+    searchcondition += ` and mx_cate_id = '${cateid.value}'`
+  }
+  searchdataApi({
+    viewname: 'bf_files',
+    searchcondition,
+    orderfield: '',
+  }).then((res) => {
+    fileList.value = res.data.map((item) => {
+      return {
+        ...item,
+        name: item.mx_filename,
+        url: item.mx_mapfilename,
+      }
+    })
+
+    console.log(fileList.value)
+  })
+}
+
+function onItemClick(fileItem: UploadFileItem) {
+  if (!isImageUrl(fileItem.mx_mapfilename) && !isVideoUrl(fileItem.mx_mapfilename)) {
+    downloadFile(fileItem.mx_mapfilename)
+  }
+}
+
+function beforeRead(file: UploadFile): boolean | Promise<UploadFile> {
+  // 非图片直接允许上传
+  if (!isImage(file.name))
+    return true
+
+  // 图片异步压缩，返回修改后的 UploadFile 对象
+  return imageCompress(file.path).then((res) => {
+    console.log(res)
+
+    file.path = res.path
+    file.size = res.size
+    return file
+  }).catch((err) => {
+    console.error('图片压缩失败：', err)
+    return file
+  })
+}
+
+async function afterRead(fileItem: UploadFileItem) {
+  try {
+    // 设置上传中状态
+    fileItem.status = 'uploading'
+    fileItem.message = '正在上传'
+    fileList.value = [...fileList.value]
+
+    // 上传到阿里云
+    const res = await uploadFileToAliyun(
+      fileItem.file.path,
+      fileItem.file.name,
+      fileItem.file.type,
+    )
+
+    if (!res.url)
+      throw new Error('上传失败：未获取到文件 URL')
+
+    // 调用后端接口保存文件信息
+    const saveRes = await aliyunpluploadApi({
+      despathfile: res.url,
+      myfilename: fileItem.file.name,
+      size: formatFileSize(fileItem.file.size),
+      tablename: 'bf_files',
+      sid: father.value,
+      mx_moduleid: moduleid.value,
+      mx_cate_id: cateid.value,
+    })
+
+    if (saveRes.data === 'OK') {
+      // 上传完成
+      fileItem.status = 'done'
+      fileItem.message = '上传成功'
+    }
+    else {
+      // 后端返回非 OK
+      throw new Error(saveRes.data || '上传失败')
+    }
+
+    fileList.value = [...fileList.value]
+  }
+  catch (err: any) {
+    console.error('上传失败:', err)
+    fileItem.status = 'failed'
+    fileItem.message = err.message || '上传失败'
+    fileList.value = [...fileList.value]
+  }
+}
+
+function onRemove(index: number, item: UploadFileItem) {
+  delSubRecordApi({
+    module: 'bf_files',
+    id: item.subid,
+    bucketName: aliyunBucket,
+  }).then((res) => {
+    if (res.data.result) {
+      toast.success('删除成功')
+    }
+  })
+}
+</script>
+
+<template>
+  <view class="file">
+    <sar-upload v-model="fileList" :readonly="!isEdit" :after-read="afterRead" :before-read="beforeRead" multiple @item-click="onItemClick" @remove="onRemove" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.file {
+  padding: 36rpx;
+}
+</style>