orchestra-app/src/components/o-upload-all/index.tsx

import { closeToast, Icon, Image, showLoadingToast, showToast, Uploader } from 'vant'
import { defineComponent, ref } from 'vue'
import styles from './index.module.less'
import { useCustomFieldValue } from '@vant/use'
import { postMessage } from '@/helpers/native-message'
import umiRequest from 'umi-request'
import iconUploader from '@common/images/icon-upload.png'
import iconUploadClose from '@common/images/icon-upload-close.png'
import request from '@/helpers/request'
import { getOssUploadUrl, state } from '@/state'

export default defineComponent({
  name: 'col-upload',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    deletable: {
      type: Boolean,
      default: true
    },
    maxCount: {
      type: Number,
      default: 1
    },
    native: {
      // 是否原生上传
      type: Boolean,
      default: false
    },
    uploadSize: {
      // 上传图片大小
      type: Number,
      default: 5
    },
    accept: {
      type: String,
      default: 'image/*'
    },
    onUploadChange: {
      type: Function,
      default: (url: string) => {}
    },
    bucket: {
      type: String,
      default: 'daya'
    },
    uploadIcon: {
      type: String,
      default: iconUploader
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  methods: {
    nativeUpload() {
      postMessage(
        {
          api: 'chooseFile',
          content: { type: 'img', max: 1, bucket: this.bucket }
        },
        (res: any) => {
          console.log(res, 'fileUrl')
          this.$emit('update:modelValue', [...this.modelValue, res.fileUrl])
        }
      )
    },
    beforeRead(file: any) {
      console.log(file, 'beforeRead')
      const isLt2M = file.size / 1024 / 1024 < this.uploadSize
      if (!isLt2M) {
        showToast(`上传文件大小不能超过 ${this.uploadSize}MB`)
        return false
      }
      return true
    },
    beforeDelete(file: any, detail: { index: any }) {
      // this.dataModel.splice(detail.index, 1)
      return true
    },
    async afterRead(file: any, detail: any) {
      try {
        file.status = 'uploading'
        file.message = '上传中...'
        await this.uploadFile(file.file)
      } catch (error) {
        closeToast()
      }
    },
    onClose(e: any) {
      this.$emit('update:modelValue', null)
      this.onUploadChange()
      e.stopPropagation()
    },
    async getFile(file: any) {
      try {
        await this.uploadFile(file)
      } catch {
        //
      }
    },
    async uploadFile(file: any) {
      // 上传文件
      try {
        // 获取签名
        if (state.platformType === 'SCHOOL') {
          state.platformApi = '/api-school'
        } else if (state.platformType === 'TEACHER') {
          state.platformApi = '/api-teacher'
        } else if (state.platformType === 'STUDENT') {
          state.platformApi = '/api-student'
        }
        const signUrl = state.platformApi + '/open/getUploadSign'
        const tempName = file.name || ''
        const fileName = tempName && tempName.replace(/ /gi, '_')
        const key = new Date().getTime() + fileName
        console.log(file)

        const res = await request.post(signUrl, {
          data: {
            filename: fileName,
            bucketName: this.bucket,
            postData: {
              filename: fileName,
              acl: 'public-read',
              key: key,
              unknowValueField: []
            }
          }
        })
        showLoadingToast({
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        const obj = {
          policy: res.data.policy,
          signature: res.data.signature,
          key: key,
          KSSAccessKeyId: res.data.kssAccessKeyId,
          acl: 'public-read',
          name: fileName
        }
        const formData = new FormData()
        for (const key in obj) {
          formData.append(key, obj[key])
        }
        formData.append('file', file, fileName)
        await umiRequest(getOssUploadUrl(this.bucket), {
          method: 'POST',
          data: formData
        })
        console.log(getOssUploadUrl(this.bucket) + key)
        const uploadUrl = getOssUploadUrl(this.bucket) + key
        closeToast()
        // 判断是否是多选
        this.$emit('update:modelValue', [...this.modelValue, uploadUrl])
        this.onUploadChange([...this.modelValue, uploadUrl])
      } catch (error) {
        console.log(error, 'uploadFile')
      }
    }
  },
  render() {
    useCustomFieldValue(() => this.modelValue)

    return (
      <div class={styles['uploader-section']}>
        {this.modelValue.length > 0 &&
          this.modelValue.map((item: any) => (
            <div class={[styles.uploader, styles[this.size]]}>
              {/* 删除按钮 */}
              {this.deletable && (
                <Icon name="cross" onClick={this.onClose} class={styles['img-close']} />
              )}
              <div class={['van-uploader__upload']}>
                <Image src={item} class={styles.previewImg} fit="cover" />
              </div>
            </div>
          ))}

        {this.native ? (
          this.maxCount > 1 ? (
            <div class={[styles.uploader, styles[this.size]]} onClick={this.nativeUpload}>
              {this.modelValue ? (
                <Image
                  fit="cover"
                  position="center"
                  class={styles.uploadImg}
                  src={this.modelValue as any}
                />
              ) : (
                <Icon name={this.uploadIcon} size="32" />
              )}
            </div>
          ) : (
            ''
          )
        ) : this.maxCount > 1 ? (
          <Uploader
            class={[styles.uploader, styles[this.size]]}
            afterRead={this.afterRead}
            beforeRead={this.beforeRead}
            beforeDelete={this.beforeDelete}
            uploadIcon={this.uploadIcon}
            disabled={this.modelValue.length === this.maxCount}
            accept={this.accept}
          />
        ) : (
          <Uploader
            class={[styles.uploader, styles[this.size]]}
            afterRead={this.afterRead}
            beforeRead={this.beforeRead}
            beforeDelete={this.beforeDelete}
            uploadIcon={this.uploadIcon}
            accept={this.accept}
          >
            <Icon name={this.uploadIcon} class={['van-uploader__upload']} size="32" />
          </Uploader>
        )}
      </div>
    )
  }
})