xyyd-fatfox/src/utils/ImageUploader.tsx

import { defineComponent } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdUpload, FaEye } from 'oh-vue-icons/icons'
import upload from './upload'
import 'viewerjs/dist/viewer.css'
import { api as showViewer } from 'v-viewer'
import { globalToast } from '@/main'
import useUserStore from '@/user/useUserStore'
import useRouterStore from '@/useRouterStore'

addIcons(MdUpload, FaEye)

// !清 asyncLoader 加载使用
export default defineComponent({
  props: {
    ratio: {
      type: Number,
      default: 1
    },
    width: {
      type: Number,
      default: 64
    },
    value: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 4
    }
  },
  emits: {
    'update:value': (() => true) as (val: string) => boolean
  },
  setup(props, ctx) {
    let input: HTMLInputElement | null = null

    return () => (
      <div>
        <input
          type="file"
          accept=".png,.jpeg,.jpg,.svg"
          style="display:none"
          ref={(el) => (input = el as any)}
          onChange={(e) => {
            const el = e.target as any
            const file: File | undefined = el.files?.[0]
            el.value = ''
            if (!file) return
            if (file.size > props.size * 1000 * 1000) {
              globalToast.warning(`大小不得超过${props.size}mb`)
              return
            }
            upload(file, 'test').then((res) => {
              ctx.emit('update:value', res)
            })
          }}
        />
        <div
          class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
          style={{
            width: props.width + 'px',
            height: props.width / props.ratio + 'px',
            backgroundImage: `url('${props.value}')`
          }}
          onClick={() => {
            if (useUserStore().isLogin) {
              input?.click()
            } else {
              globalToast.warning('请先登录')
              useRouterStore().go('global-login')
            }
          }}
        >
          {props.value ? (
            <div class="w-full h-full opacity-0 hover:opacity-100 relative transition-all bg-slate-800/20 flex justify-center items-center">
              <div
                class="px-1 rounded hover:bg-white/20"
                onClick={(e) => {
                  e.stopPropagation()
                  showViewer({
                    images: [props.value],
                    options: {
                      navbar: false,
                      toolbar: false
                    }
                  })
                }}
              >
                <OhVueIcon name="fa-eye" scale={1.2} fill="rgba(255,255,255,.4)" />
              </div>
            </div>
          ) : (
            <OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />
          )}
        </div>
        {/* <div class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>{' '} */}
      </div>
    )
  }
})