DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/upload-file.vue

<template>
  <view>
    <view class="cu-form-group" style="border-bottom: none; padding-bottom: 0;">
      <view class="title">
        <text v-if="required" class="lr-required">*</text>
        {{ title || '' }}
      </view>
    </view>

    <view class="cu-form-group" style="border-top: none;">
      <view class="grid col-4 grid-square flex-sub">
        <view v-for="(file, index) in value" :key="index" class="bg-img">
          <image
            v-if="isImgFile(file.type)"
            @click="fileClick(index)"
            :src="file.path"
            :webp="file.type === 'webp'"
            mode="aspectFill"
          ></image>
          <view v-else-if="isDocFile(file.type)" @click="fileClick(index)" class="file-icon solids">
            <l-icon type="text" />
          </view>
          <view v-else class="file-icon solids"><l-icon type="text" /></view>

          <view v-if="!readonly" @click.stop="delFile(index)" class="cu-tag bg-red" style="height: 24px; width: 24px;">
            <l-icon type="close" color="white" style="width: 18px; height: 24px; font-size: 24px;" />
          </view>
        </view>

        <view v-if="!readonly && value.length < Number(number)" @click="chooseFile" class="solids">
          <l-icon type="file" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-upload-file',

  props: {
    number: { default: 1 },
    readonly: {},
    value: { default: () => [] },
    title: {},
    required: {}
  },

  methods: {
    getFileExt(path) {
      return /\.(\w{2,5})$/.exec(path)[1] || null
    },

    isImgFile(type) {
      const typeString = (type || '').toLowerCase()
      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'image'].includes(typeString)
    },

    isDocFile(type) {
      const typeString = (type || '').toLowerCase()
      return ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'].includes(typeString)
    },

    delFile(index) {
      const newList = JSON.parse(JSON.stringify(this.value))
      newList.splice(index, 1)
      this.$emit('input', newList)
      this.$emit('change')
      this.$emit('del')
    },

    chooseFile() {
      // #ifdef MP-DINGTALK
      dd.chooseImage({
        count: Number(this.number),
        success: ({ filePaths }) => {
          if (filePaths) {
            const newList = JSON.parse(JSON.stringify(this.value || [])).concat(
              filePaths.map(t => ({ path: t, type: this.getFileExt(t) }))
            )
            this.$emit('input', newList)
            this.$emit('change', newList)
            this.$emit('add')
          }
        }
      })
      // #endif

      // #ifndef MP-DINGTALK
      uni.chooseImage({
        count: Number(this.number),
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: ({ tempFilePaths }) => {
          const newList = JSON.parse(JSON.stringify(this.value || [])).concat(
            tempFilePaths.map(t => ({ path: t, type: this.getFileExt(t) }))
          )
          this.$emit('input', newList)
          this.$emit('change', newList)
          this.$emit('add')
        }
      })
      // #endif
    },

    async fileClick(index) {
      const { path, type, uid, size = 0 } = this.value[index]
      if (this.isImgFile(type)) {
        uni.previewImage({ urls: [path], current: path })
      } else if (this.isDocFile(type)) {
        // #ifndef H5 || MP-DINGTALK
        if (size >= 50 * 1024 * 1024) {
          this.TOAST('小程序端无法下载超过50MB的文件，此文件大小为${size}KB，超过限制')
          return
        }
        // #endif

        // #ifndef MP-DINGTALK
        const tempFilePath = await this.HTTP_DOWNLOAD(uid)
        uni.openDocument({ filePath: tempFilePath, fileType: type })
        // #endif

        // #ifdef MP-DINGTALK
        this.TOAST('钉钉小程序只支持查看图片文件')
        // #endif
      } else {
        // #ifndef MP-DINGTALK
        this.TOAST('小程序端只支持打开图片和文档(word、pdf等)文件')
        // #endif

        // #ifdef MP-DINGTALK
        this.TOAST('钉钉小程序只支持查看图片文件')
        // #endif

        // #ifdef APP-VUE
        const tempFilePath = await this.HTTP_DOWNLOAD(uid)
        uni.openDocument({ filePath: tempFilePath, fileType: type })
        // #endif

        // #ifdef H5
        await this.HTTP_DOWNLOAD(uid)
        // #endif
      }
    }
  }
}
</script>

<style lang="less" scoped>
.file-icon {
  line-height: 100%;
  position: static;
}
</style>