1

2025-10-09 18:19:55 +08:00
parent f2ffc65094
commit 386f1e7466
1553 changed files with 284685 additions and 32820 deletions
--- a/components/n-upload/n-upload.vue
+++ b/components/n-upload/n-upload.vue
@@ -0,0 +1,136 @@
+<template>
+  <view>
+    <up-upload
+      v-if="isUpdate"
+      :file-list="fileList"
+      :accept="accept"
+      multiple
+      :size-type="['original', 'compressed']"
+      :max-count="maxCount"
+      :width="width"
+      :height="height"
+      :preview-full-image="true"
+      :disabled="disabled"
+      @delete="deletePic"
+      @after-read="afterRead"
+    >
+    </up-upload>
+    <u-album v-else multiple-size="85" single-size="85" :urls="imgs" row-count="4" />
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue'
+import { getBaseUrl, getImgBaseUrl } from '@/defaultBaseUrl'
+
+const props = defineProps({
+  modelValue: { type: [Array, String], default: '' },
+  isUpdate: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  accept: { type: String, default: 'image' },
+  width: { type: String, default: '80px' },
+  height: { type: String, default: '80px' },
+  maxCount: { type: Number, default: 20 },
+  returnAsString: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const fileList = ref([])
+const imgs = ref([])
+const uploadConfig = reactive({
+  baseURL: getBaseUrl(),
+  imgBaseURL: getImgBaseUrl(),
+  header: { 'X-Access-Token': uni.getStorageSync('token') }
+})
+
+// 同步外部值到组件
+watch(
+  () => props.modelValue,
+  newVal => {
+    if (!newVal) return (fileList.value = [])
+    const urls = Array.isArray(newVal) ? newVal : newVal.split(',')
+    imgs.value = urls
+    fileList.value = urls.map(url => ({
+      url: uploadConfig.imgBaseURL + url,
+      status: 'success',
+      message: ''
+    }))
+  },
+  { immediate: true }
+)
+
+const deletePic = event => {
+  fileList.value.splice(event.index, 1)
+  updateParent(fileList.value)
+}
+
+const afterRead = async event => {
+  const files = [].concat(event.file)
+  const initialLength = fileList.value.length
+
+  // 添加上传状态
+  fileList.value.push(
+    ...files.map(file => ({
+      ...file,
+      status: 'uploading',
+      message: '上传中'
+    }))
+  )
+
+  try {
+    for (let i = 0; i < files.length; i++) {
+      const result = await uploadFile(files[i])
+      const index = initialLength + i
+      fileList.value[index] = {
+        ...files[i],
+        status: 'success',
+        url: uploadConfig.imgBaseURL + result.message
+      }
+    }
+  } catch (error) {
+    console.error('Upload failed:', error)
+    // 回滚失败的上传
+    fileList.value.splice(initialLength, files.length)
+  } finally {
+    updateParent(fileList.value)
+  }
+}
+
+const uploadFile = file => {
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: `${uploadConfig.baseURL}/sys/common/upload`,
+      filePath: file.url,
+      name: 'file',
+      header: uploadConfig.header,
+      formData: { biz: 'lims-device' },
+      success: res => {
+        if (res.statusCode === 200) {
+          resolve(JSON.parse(res.data))
+        } else {
+          reject(new Error(res.data))
+        }
+      },
+      fail: reject
+    })
+  })
+}
+
+const formatValue = fileList => {
+  // 去掉 imgBaseURL 后的部分
+  const baseUrlLength = uploadConfig.imgBaseURL.length
+  return props.returnAsString
+    ? fileList.map(item => item.url.slice(baseUrlLength)).join(',')
+    : fileList.map(item => item.url.slice(baseUrlLength))
+}
+const updateParent = fileList => {
+  emit('update:modelValue', formatValue(fileList))
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.u-upload__wrap__preview) {
+  margin: 0;
+}
+</style>