colexiu-project/src/components/col-upload/index.tsx

import { ElIcon, ElImage, ElLoading, ElMessage, ElUpload } from 'element-plus'
import { defineComponent, PropType } from 'vue'
import { Document } from '@element-plus/icons-vue'
import styles from './index.module.less'
import iconUpload from './images/icon_upload.png'
import request from '@/helpers/request'
import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload'

export default defineComponent({
  name: 'col-upload',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    uploadType: {
      type: String as PropType<'image' | 'file'>,
      default: 'image'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    bucket: {
      type: String,
      default: 'daya'
    },
    size: {
      type: Number,
      default: 5 // 默认5M
    },
    accept: {
      type: String,
      default: '.png,.jpg,.jpeg'
    },
    tips: {
      type: String,
      default: '请上传图片'
    },
    extraTips: {
      type: String,
      default: '图片最大不能超过5MB'
    },
    onChange: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      // ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
      ossUploadUrl: `https://${this.bucket}.ks3-cn-beijing.ksyuncs.com/`,
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        KSSAccessKeyId: '',
        acl: 'public-read',
        name: ''
      },
      fileList: [] as any,
      loading: null as any
    }
  },
  methods: {
    async handleSuccess(info: any) {
      // this.loading?.close()
      // const url = this.ossUploadUrl + this.dataObj.key
      // console.log(url)
      // this.$emit('update:modelValue', url)
      // this.onChange(url)

      try {
        const obj = {
          policy: info.data.policy,
          signature: info.data.signature,
          key: info.data.key,
          KSSAccessKeyId: info.data.kssAccessKeyId,
          acl: 'public-read',
          name: info.data.key,
          file: info.file
        }
        const url = await onOnlyFileUpload(this.ossUploadUrl, obj)

        // console.log(url)
        this.$emit('update:modelValue', url)
        this.onChange(url)
      } catch {
        //
      }
      this.loading?.close()
    },
    handleRemove() {
      console.log('remove')
    },
    handleChange() {
      console.log('handleChange')
    },
    handleProgress() {
      console.log('handleProgress')
    },
    handleError() {
      this.loading?.close()
    },
    async beforeUpload(file: any) {
      // beforeUpload
      console.log(file)
      // let fileType = true
      // if (props.rules.type && props.rules.type.length > 0) {
      //   const fileExtension = file.name.split('.').pop().toUpperCase()
      //   console.log(
      //     props.rules.type,
      //     fileExtension,
      //     props.rules.type.indexOf(fileExtension) != -1
      //   )
      //   if (props.rules.type.indexOf(fileExtension) != -1) {
      //     fileType = true
      //   } else {
      //     fileType = false
      //     ElMessage.error('请上传正确的文件!')
      //     return false
      //   }
      // }

      let isLt2M = true
      if (this.size) {
        isLt2M = file.size / 1024 / 1024 < this.size
        if (!isLt2M) {
          ElMessage.error(`文件大小不能超过${this.size}M!`)
          return false
        }
      }
      this.loading = ElLoading.service({
        target: this.$refs.uploadDom as HTMLElement,
        lock: true,
        fullscreen: false,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      console.log(this.loading)
      try {
        const fileName = file.name.replaceAll(' ', '_')
        const key = new Date().getTime() + fileName
        const obj = {
          filename: key,
          bucketName: this.bucket,
          postData: {
            filename: key,
            acl: 'public-read',
            key: key
          }
        }
        // const { data } = await request.post('/api-website/getUploadSign', {
        //   data: obj
        // })
        const { data } = await getUploadSign(obj)
        this.dataObj = {
          policy: data.policy,
          signature: data.signature,
          key: key,
          KSSAccessKeyId: data.kssAccessKeyId,
          acl: 'public-read',
          name: key
        }
      } catch (e) {
        this.loading.close()
      }
    },
    fileName(name = '') {
      return name.split('/').pop()
    },
    handleExceed() {}
  },
  render() {
    return (
      <div class={[styles.colUpload, 'w-full']}>
        <ElUpload
          disabled={this.disabled}
          action={this.ossUploadUrl}
          data={this.dataObj}
          httpRequest={this.handleSuccess}
          onRemove={this.handleRemove}
          onChange={this.handleChange}
          onProgress={this.handleProgress}
          onError={this.handleError}
          fileList={this.fileList}
          showFileList={false}
          accept={this.accept}
          beforeUpload={this.beforeUpload}
          onExceed={this.handleExceed}
          ref="uploadRef"
          class={this.uploadType === 'file' ? styles.fileUpload : ''}
          style={{ lineHeight: '0' }}
        >
          <div
            ref="uploadDom"
            class={[styles.uploadClass, 'w-full']}
            style={{ height: this.uploadType === 'image' ? '85px' : '48px' }}
          >
            {this.modelValue ? (
              this.uploadType === 'image' ? (
                <ElImage
                  src={this.modelValue}
                  fit="cover"
                  class={styles.uploadSection}
                />
              ) : (
                <div class={styles.uploadFile}>
                  <ElIcon>
                    <Document />
                  </ElIcon>
                  <span
                    class="whitespace-nowrap overflow-hidden text-ellipsis"
                    style={{ lineHeight: '1.2' }}
                  >
                    {this.fileName(this.modelValue)}
                  </span>
                </div>
              )
            ) : this.uploadType === 'image' ? (
              <div
                class={[
                  styles.uploadSection,
                  'flex items-center flex-col justify-center'
                ]}
              >
                <img src={iconUpload} class="w-8 h-7 mb-3" />
                <p>{this.tips}</p>
              </div>
            ) : (
              <div class={styles.uploadFile}>
                <ElIcon>
                  <Document />
                </ElIcon>
                上传文件
              </div>
            )}
          </div>
        </ElUpload>

        <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>
      </div>
    )
  }
})