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" style="position: relative;">
          <view v-if="file.noUpdated" class="mask"></view>
          <image
            v-if="isImgFile(file.type)"
            @click="fileClick(index)"
            :src="file.path?file.path:file"
            :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" @click="fileClick(index)"><l-icon type="text" /></view>

          <view v-if="!readonly" @click.stop="delFile(index,file.uid)" 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 class="fileName">
			  <text>{{file.name}}</text>
		  </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','image/jpg','jpeg','image/jpeg', 'png', 'image/png','gif', 'image/gif','bmp', 'image/bmp','webp', 'image/webp','image'].includes(typeString)
    },

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

    async delFile(index,fileId) {
	  if (!(await this.CONFIRM('删除文件', '确定要删除该文件吗？', true))) {
		return
	  }
      const newList = JSON.parse(JSON.stringify(this.value))
      newList.splice(index, 1)
      this.$emit('input', newList)
      this.$emit('change')
      this.$emit('del')
	  //物理删除
	  this.DELETE_FILE(fileId);
    },

    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.chooseFile({
      //   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')
      //   }
      // })
	  
	  uni.chooseFile({
	    count: Number(this.number),
	    sizeType: ['original', 'compressed'],
	    sourceType: ['album', 'camera'],
	    success: ({ tempFilePaths,tempFiles }) => {
	      const newList = JSON.parse(JSON.stringify(this.value || [])).concat(
	        // tempFilePaths//.map(t => ({ path: t, type: this.getFileExt(t) }))
			tempFilePaths.map((t,i) => ({ path: t, type: tempFiles[i].type, size:tempFiles[i].size, name:tempFiles[i].name, noUpdated:true} ))
	      )
	      this.$emit('input', newList)
	      this.$emit('change', newList)
	      this.$emit('add')
	    }
	  })
      // #endif
    },

    async fileClick(index) {
	  // if(typeof this.value[index] == "string"){
		 //  uni.previewImage({ urls: this.value.filter(item=>typeof this.value[index] == "string"), current: this.value[index] })
		 //  return
	  // }
      const { path, type, uid, size = 0 } = this.value[index]
	  if (this.isImgFile(type)) {
	    uni.previewImage({ urls: [path], current: path })
	  }else{
		uni.openDocument({ filePath: path, fileType: type })
	  }
      // 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;
}
.fileName{
	padding: 2px 2px;
	margin-bottom: 2px;
	text-align: center;
	position: absolute;
	bottom: 0px;
	width: 100%;
	background: rgba(0,0,0,0.2);
	color: #fff;
	font-size: 12px;
	
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.mask{
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
	// background: rgba(255,252,153,0.2);
	background: rgba(0,0,0,0.7);
	z-index: 100;
	pointer-events: none;
}
</style>