admin/src/components/frame/c-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"
    >
      <el-button type="primary">选择文件</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 lang="ts">
import type { Ref } from 'vue';
import { ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import _ from 'lodash';

// #region
interface ListItem {
  errcode?: string | number;
  errmsg?: string;
  uri?: string;
  name?: string;
  url?: string;
  id?: any;
}
let dialog: Ref<{ show: boolean; url: string }> = 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<ListItem>, default: () => [] },
  model: { type: String, default: () => '' }
});
// 图片上传地址
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: { url: string }) => {
  // this.dialog = { show: true, url: file.url };
  window.open(file.url);
};
// 只允许上传多少个文件
const outLimit = () => {
  ElMessage.error(`只允许上传${limit.value}个文件`);
};
// 上传成功,response：成功信息，file：图片信息，fileList：图片列表
const onSuccess = (response: { errcode: string | number; errmsg: string; uri: any }, file: { name: string }) => {
  if (response.errcode !== 0) {
    ElMessage({ type: 'error', message: '删除成功' });
    return;
  }
  let ponse = _.omit(response, ['errcode', 'errmsg']);
  let arr: Ref<ListItem[]> = _.cloneDeep(list);
  if (_.isArray(list.value)) {
    arr.value.push({ ...ponse, name: file.name, url: `${import.meta.env.VITE_APP_HOST}${response.uri}` });
  } else {
    arr.value = [{ ...ponse, name: file.name, url: `${import.meta.env.VITE_APP_HOST}${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>