integrated_mini_bus_vue/src/components/upload/index.vue

<template>
  <el-upload
    ref="uploadRef"
    style="width: 100%"
    :file-list="fileList"
    :action="action"
    multiple
    :limit="limit"
    :list-type="listType"
    :auto-upload="autoUpload"
    :disabled="disabled"
    :accept="accept"
    :on-remove="onRemove"
    :before-remove="beforeRemove"
    :on-change="onChange"
    :on-exceed="onExceed"
    :on-preview="onPreview"
    :http-request="httpRequest"
    :show-file-list="showFileList"
    :class="{ hide: fileList.length === limit }"
  >
    <icon-plus
      v-if="listType === 'picture-card'"
      theme="filled"
      size="32"
      fill="#fff"
      :stroke-width="3"
    />
    <el-button v-else type="primary">点击选择文件上传</el-button>
    <template #tip>
      <div class="mt-10 text-red"><slot name="tip"></slot></div>
    </template>
  </el-upload>
  <el-dialog v-model="visible" title="查看图片">
    <img
      :src="imageUrl"
      alt="Preview Image"
      style="width: 100%; object-fit: scale-down"
    />
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { setDeleteImg } from "@/request/api";

defineOptions({
  name: "LayoutUpload",
});
const props = defineProps({
  fileList: {
    type: Array,
    default: () => [],
    required: true,
  },
  autoUpload: {
    type: Boolean,
    default: false,
  },
  action: {
    type: String,
    default: "",
  },
  limit: {
    type: Number,
    default: 1,
  },
  listType: {
    type: String,
    default: "text",
  },
  accept: {
    type: String,
    default: "",
  },
  ratio: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  deleteToServer: {
    type: Boolean,
    default: false,
  },
  showFileList: {
    type: Boolean,
    default: true,
  },
  httpRequest: {
    type: Function,
  },
  size: {
    type: Number,
    default: 0,
  },
});
const visible = ref(false);
const imageUrl = ref("");
const emits = defineEmits(["update:file-list", "preview"]);
const uploadRef = ref(null);
const onExceed = () => {
  ElMessage.warning(`最多上传${props.limit}个文件`);
};
const beforeRemove = async (uploadFile) => {
  if (props.deleteToServer && uploadFile.IMGFILES_ID) {
    await ElMessageBox.confirm("确定要删除吗？", {
      type: "warning",
    });
    await setDeleteImg({
      IMGFILES_ID: uploadFile.IMGFILES_ID,
    });
  }
};
const onRemove = (uploadFile, uploadFiles) => {
  emits("update:file-list", uploadFiles);
};
const onChange = (uploadFile, uploadFiles) => {
  const accept = props.accept && props.accept.split(",");
  const ratio = props.ratio && props.ratio.split("*");
  const suffix = uploadFile.raw.name.substring(
    uploadFile.raw.name.lastIndexOf("."),
    uploadFile.raw.name.length
  );
  const size = props.size * 1024 * 1024;
  if (ratio) {
    const img = new Image();
    img.src = uploadFile.url;
    img.onload = () => {
      if (img.width !== +ratio[0] && img.height !== +ratio[1]) {
        ElMessage.warning(`只能上传${props.ratio}分辨率的图片`);
        uploadRef.value.handleRemove(uploadFile.raw);
      }
    };
  }
  if (size) {
    if (uploadFile.size > size) {
      ElMessage.warning(`文件大小不能超过${props.size}M`);
      uploadRef.value.handleRemove(uploadFile.raw);
    }
  }
  if (accept) {
    if (accept.includes(suffix)) {
      emits("update:file-list", uploadFiles);
    } else {
      ElMessage.warning(`只能上传${props.accept}格式的文件`);
      uploadRef.value.handleRemove(uploadFile.raw);
    }
  } else {
    emits("update:file-list", uploadFiles);
  }
};
const onPreview = (uploadFile) => {
  if (props.listType === "picture-card") {
    visible.value = true;
    imageUrl.value = uploadFile.url;
  } else {
    emits("preview", uploadFile);
  }
};
</script>

<style scoped lang="scss">
.hide :deep(.el-upload--picture-card) {
  display: none;
}
</style>