daimp-front/sub-government-affairs-service/src/views/landManage/component/illegalHandle/common/FileUpload.vue

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    :limit="props.limit"
    :auto-upload="false"
    :file-list="fileList"
    :on-change="fileChange"
    :before-remove="handleDelFile"
  >
    <el-button type="primary" :disabled="fileList.length == 5">点击上传</el-button>
    <template #tip>
      <div v-if="props.format.length" class="el-upload__tip">只能上传{{ props.format.join() }} 文件，且不超过20MB</div>
    </template>
  </el-upload>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { CommonUpload } from '@/apis';

const emit = defineEmits(['update:attrs']);
const props = defineProps({
  attrs: {
    type: Array,
    default: () => [],
  },
  limit: {
    type: Number,
    default: 5,
  },
  format: {
    type: Array,
    default: () => [],
  },
  size: {
    type: Number,
    default: 20,
  },
});

/* --------------- data --------------- */
// #region

const fileList = ref([]);
watch(
  () => props.attrs,
  (val) => {
    fileList.value = val;
  },
  { deep: true, immediate: true }
);
// #endregion

/* --------------- methods --------------- */
// #region

async function fileChange(file, list) {
  let formatReg = true;
  if (props.format.length > 0) {
    formatReg = props.format.includes(file.name.slice(file.name.lastIndexOf('.') + 1));
  }
  const fileSize = file.size / 1024 / 1024 < props.size;
  if (!formatReg) {
    ElMessage.error(`上传文件格式不正确，仅支持${props.format.join('/ ')}格式`);
    delAttr(file.uid, list);
  }
  if (!fileSize) {
    ElMessage.error(`上传文件大小不能超过${props.size}MB`);
    delAttr(file.uid, list);
  }
  await rowUploadPicture(file);
}
function handleDelFile(file) {
  delAttr(file.uid, fileList.value);
}
function delAttr(uid, list = []) {
  if (!uid || !list) return false;
  let i = list.findIndex((v) => v.uid == uid);
  if (i < 0) return;
  else list.splice(i, 1);
  emit('update:attrs', fileList.value);
}

async function rowUploadPicture({ raw, name, uid }) {
  const formData = new FormData();
  formData.append('file', raw);
  const res = await CommonUpload(formData);
  if (res.code === 200) {
    fileList.value.push({
      name,
      url: res.data.url,
      status: 'success',
      uid,
    });
    emit('update:attrs', fileList.value);
  }
}

// #endregion
</script>

<style lang="scss" scoped></style>