fs-admin/src/views/imageUpload/index.vue

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import ImageUpload from '@/components/FsImageUpload/index.vue'
const images = ref([])
// 手动上传数据
const images2 = ref([])
const images3 = ref([])
const imageUploadRef = ref()

const isReload = ref(false)

const onRemove = (file: any) => {
  console.log(file)
}

const uploadFunction = (item: any) => {
  return new Promise(() => {
    item.status = 'uploading'
    item.progress = 50
    setTimeout(() => {
      item.progress = 90
    }, 1000)
    setTimeout(() => {
      item.progress = 100
      item.status = Math.random() > 0.5 ? 'success' : 'danger'
    }, 1500)
  })
}

const upload = () => {
  imageUploadRef.value?.submit()
}

const submit = () => {
  if (!imageUploadRef.value?.checkUpload()) {
    ElMessage.error('请等待图片上传完成')
    return
  }
}
</script>

<template>
  <el-card header="基础示例" shadow="never">
    <ImageUpload
      v-model="images"
      :readonly="isReload"
      :limit="5"
      :uploadFunction="uploadFunction"
      drag
      @remove="onRemove"
    />
    <div class="flex items-center mt-2">
      <div>是否只读：</div>
      <el-radio-group v-model="isReload">
        <el-radio label="是" :value="true"> </el-radio>
        <el-radio label="否" :value="false"> </el-radio>
      </el-radio-group>
    </div>
  </el-card>
  <el-card header="支持多选" shadow="never" class="mt-3">
    <ImageUpload v-model="images2" multiple :limit="5" :uploadFunction="uploadFunction" @remove="onRemove" />
  </el-card>
  <el-card header="基础示例" shadow="never" class="mt-3">
    <ImageUpload
      v-model="images3"
      :auto-upload="false"
      :limit="5"
      :uploadFunction="uploadFunction"
      ref="imageUploadRef"
      @remove="onRemove"
    />
    <div class="flex items-center mt-2">
      <el-button type="primary" @click="upload">手动上传</el-button>
      <el-button type="primary" @click="submit">检查是否上传完毕</el-button>
    </div>
  </el-card>
</template>

<style scoped></style>