ykt-team-wxapp/components/form-template/form-cell/form-upload.vue

<template>
  <view class="textarea-row">
    <view class="form-row__label">
      {{ name }}<text v-if="required" class="form-cell--required"></text>
    </view>
    <view class="flex flex-wrap">
      <view v-for="(file, idx) in files" :key="idx" class="upload-item mt-10">
        <image v-if="file.isImage" :src="file.url" class="w-full h-full"></image>
        <image v-else-if="file.isPdf" src="/static/pdf.svg" class="w-full h-full"></image>
        <image v-else src="/static/file.svg" class="w-full h-full"></image>
        <uni-icons type="close" :size="32" color="red" class="remove-icon" @click="remove(idx)"></uni-icons>
      </view>
      <view v-if="value.length < 10"
        class="upload-item border-primary mt-10 flex items-center justify-center text-primary" @click="chooseType()">
        <uni-icons type="camera" :size="40" color="#0074ff"></uni-icons>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue';
import { upload } from '@/utils/http';
import { loading, hideLoading, toast } from '@/utils/widget';

const emits = defineEmits(['change']);
const props = defineProps({
  form: {
    type: Object,
    default: () => ({})
  },
  name: {
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  title: {
    default: ''
  },
  disableChange: {
    type: Boolean,
    default: false
  }
})
const value = computed(() => Array.isArray(props.form[props.title]) ? props.form[props.title] : [])
const files = computed(() => value.value.map(i => {
  return {
    url: i.url,
    name: i.name,
    type: i.type,
    isImage: /image/i.test(i.type),
    isPdf: /application\/pdf/i.test(i.type),
  }
}))

function chooseType() {
  uni.showActionSheet({
    itemList: ['图片', 'PDF'],
    success: (res) => {
      if (res.tapIndex === 0) {
        addImage()
      } else if (res.tapIndex === 1) {
        addPdf()
      }
    }
  })
}

function addPdf() {
  wx.chooseMessageFile({
    count: 1, // 最多选择1个文件
    type: 'all', // 所有类型文件
    success: async (res) => {
      const file = res.tempFiles[0];
      const { path, name, size } = file;
      const type = checkFileValid(name, size);
      // 检查文件类型和大小
      if (!type) return;
      loading();
      const result = await upload(path);
      hideLoading();
      if (result) {
        change([...value.value, { url: result, type }])
      } else {
        toast('上传失败')
      }
    },
    fail: (err) => {
      if (/cancel/i.test(err.errMsg)) {
        // toast('用户取消选择文件')
      } else {
        toast('上传失败')
      }
    }
  })
}

function checkFileValid(fileName, fileSize) {
  // 获取文件扩展名
  const ext = fileName.split('.').pop().toLowerCase();
  // 文件大小限制 (10MB)
  const maxSize = 10 * 1024 * 1024;
  if (fileSize > maxSize) {
    toast('文件大小不能超过10MB')
    return false;
  }

  if (['jpg', 'jpeg', 'png'].includes(ext)) {
    return 'image/png'
  }
  if (ext === 'pdf') {
    return 'application/pdf'
  }
  toast('仅支持图片或PDF')
  return false;
}

function addImage() {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      loading();
      const result = await upload(res.tempFilePaths[0]);
      hideLoading();
      if (result) {
        change([...value.value, { url: result, type: 'image/png' }])
      } else {
        toast('上传失败')
      }
    },
    fail: (err) => {
      if (/cancel/i.test(err.errMsg)) {
        // toast('用户取消选择文件')
      } else {
        toast('上传失败')
      }
    }
  })
}

function change(value) {
  emits('change', {
    title: props.title,
    value: value
  })
}

function remove(idx) {
  const value = [...files.value];
  value.splice(idx, 1);
  change(value)
}

</script>

<style lang="scss" scoped>
.upload-item {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
  margin-right: 30rpx;
  margin-bottom: 10rpx;
}

.textarea-row {
  padding: 24rpx 30rpx;
  border-bottom: 1px solid #eee;
  font-size: 28rpx;
}


.remove-icon {
  position: absolute;
  top: -30rpx;
  right: -30rpx;
  z-index: 2;
}
</style>