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

import { Icon, Image, Toast, Uploader } from "vant";
import { defineComponent } from "vue";
import styles from "./index.module.less";
import ColCropper from "../col-cropper";

import iconUploader from '@common/images/icon_uploader.png';
import request from "@/helpers/request";

export default defineComponent({
  name: 'col-upload',
  props: {
    modelValue: String,
    tips: {
      type: String,
      default: '点击上传'
    },
    deletable: {
      type: Boolean,
      default: true
    },
    cropper: { // 是否进行裁切
      type: Boolean,
      default: false
    },
    options: { // 裁切需要参数
      type: Object,
      default: {}
    }
  },
  mounted() {
    // console.log(this.modelValue, 'uploader');
  },
  methods: {
    beforeRead(file: any) {
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        Toast('上传文件大小不能超过 5MB')
        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 = '上传中...';
        let formData = new FormData();
        formData.append('file', file.file);
        let res = await request.post('/api-teacher/uploadFile', {
          data: formData
        })
        this.$emit('update:modelValue', res.data.url);
      } catch (error) {
        //
      }
    },
    onClose(e: any) {
      this.$emit('update:modelValue', null);
      e.stopPropagation();
    },
    async getFile(file: any) {
      // 上传文件
      try {
        let formData = new FormData();
        formData.append('file', file);
        let res = await request.post('/api-teacher/uploadFile', {
          data: formData
        })
        this.$emit('update:modelValue', res.data.url);
      } catch {
        //
      }
    }
  },
  render() {
    return (
      <div class={styles['uploader-section']}>
        {this.modelValue && this.deletable ? <Icon name="cross" onClick={this.onClose} class={styles["img-close"]} /> : null}
        {this.cropper ? <div class={styles['col-uploader']}>
          {this.modelValue ? <Image fit="cover" position="center" class={styles.uploadImg} src={this.modelValue} /> : <div class={styles.uploader}>
            <Icon name={iconUploader} size="32" />
            <p class={styles.uploaderText}>{this.tips}</p>
          </div>}
          <ColCropper option={this.options} getFile={this.getFile} />
        </div> : (
          // @ts-ignore
          <Uploader afterRead={this.afterRead} beforeRead={this.beforeRead} beforeDelete={this.beforeDelete}
            v-slots={{
              default: () => (this.modelValue ? <Image fit="cover" position="center" class={styles.uploadImg} src={this.modelValue} /> : <div class={styles.uploader}>
                <Icon name={iconUploader} size="32" />
                <p class={styles.uploaderText}>{this.tips}</p>
              </div>)
            }}
          />
        )}
      </div>
    )
  }
})