cxyy-admin/src/components/custom/custom-upload.vue

<template>
  <div id="c-upload">
    <el-upload v-if="url" ref="upload" :action="url" :limit="limit" :accept="accept" :file-list="list" :list-type="listType" :on-exceed="outLimit" :on-preview="filePreview" :on-success="onSuccess" :before-remove="onRemove" :show-file-list="showList">
      <el-button type="primary">{{ $t('common.upload_btn') }}</el-button>
      <template #tip v-if="tip">
        <p style="color: #ff0000">{{ tip }}</p>
      </template>
    </el-upload>
    <el-dialog v-model="dialog.show" append-to-body>
      <img width="100%" :src="dialog.url" alt="" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { omit, cloneDeep, isArray } from 'lodash-es'
let dialog = ref({ show: false, url: '' })
const props = defineProps({
  url: { type: String, default: () => '' },
  limit: { type: Number, default: () => 6 },
  accept: { type: String, default: () => 'image/png, image/jpeg' },
  listType: { type: String, default: () => 'text' }, //'text' | 'picture' | 'picture-card'
  tip: { type: String, default: () => undefined },
  list: { type: Array, default: () => [] },
  model: { type: String, default: () => '' },
  showList: { type: Boolean, default: true }
})
// 图片上传地址
const { url } = toRefs(props)
// 可上传文件数目
const { limit } = toRefs(props)
// 接收上传的文件类型
const { accept } = toRefs(props)
// 文件列表的类型--picture-card---picture
const { listType } = toRefs(props)
// 文件提醒
const { tip } = toRefs(props)
// 已有数据，赋值，预览
const { list } = toRefs(props)
const { model } = toRefs(props)
// const list = ref<UploadUserFile[]>([]);

const emit = defineEmits(['change'])
// 图片预览
const filePreview = (file) => {
  // this.dialog = { show: true, url: file.url };
  window.open(file.url)
}
// 只允许上传多少个文件
const outLimit = () => {
  ElMessage.error(`只允许上传${limit.value}个文件`)
}
// 上传成功,response：成功信息，file：图片信息，fileList：图片列表
const onSuccess = (response, file) => {
  console.log(response)
  if (response.errcode !== 0) {
    ElMessage({ type: 'error', message: '删除成功' })
    return
  }
  let ponse = omit(response, ['errcode', 'errmsg'])
  let arr = cloneDeep(list)
  if (isArray(list.value)) {
    arr.value.push({ ...ponse, name: file.name, url: `${response.uri}` })
  } else {
    arr.value = [{ ...ponse, name: file.name, url: `${response.uri}` }]
  }
  emit('change', { model: model.value, value: arr.value })
}
// 删除图片
// file: { id: any; uri: string }, fileList: any
const onRemove = () => {
  // let arr: Ref<ListItem[]> = _.cloneDeep(list);
  // let info = arr.value.filter((f) => f.id != file.id);
  // emit('change', info);
  return true
}

// #endregion
</script>

<style lang="scss" scoped>
#c-upload {
  width: 100%;
}
</style>