Element 图片上传封装，告别重复配置！

2023-11-23 12:40:33

Element UI 图片上传组件封装

Element UI 图片上传组件是一款强大且灵活的工具，可为 Vue.js 应用程序提供直观的图片上传体验。但是，每次使用组件时都需要重新配置参数，这可能会很繁琐。通过封装组件，我们可以消除这种重复性，使其在项目中更易于复用。

封装步骤

1. 创建组件

在 Vue.js 项目中创建一个新的组件，命名为 ImageUploader.vue。

<template>
  <el-upload
    :action="action"
    :headers="headers"
    :data="data"
    :name="name"
    :multiple="multiple"
    :withCredentials="withCredentials"
    :show-file-list="showFileList"
    :on-success="onSuccess"
    :on-error="onError"
    :on-progress="onProgress"
    :on-remove="onRemove"
  ></el-upload>
</template>

<script>
export default {
  props: {
    action: {
      type: String,
      required: true,
    },
    headers: {
      type: Object,
      default: () => {},
    },
    data: {
      type: Object,
      default: () => {},
    },
    name: {
      type: String,
      default: "file",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    withCredentials: {
      type: Boolean,
      default: false,
    },
    showFileList: {
      type: Boolean,
      default: true,
    },
    onSuccess: {
      type: Function,
      default: () => {},
    },
    onError: {
      type: Function,
      default: () => {},
    },
    onProgress: {
      type: Function,
      default: () => {},
    },
    onRemove: {
      type: Function,
      default: () => {},
    },
  },
};
</script>

2. 注册组件

在 main.js 文件中注册 ImageUploader 组件。

import ImageUploader from "./components/ImageUploader.vue";

Vue.component("ImageUploader", ImageUploader);

3. 使用组件

现在，可以在需要使用图片上传组件的地方使用 ImageUploader 组件了。

<ImageUploader
  action="https://example.com/upload"
  headers="{ 'X-CSRF-TOKEN': '{{ csrf_token() }}' }"
  data="{ 'user_id': 1 }"
  name="file"
  multiple
  withCredentials
  showFileList
  onSuccess="onSuccess"
  onError="onError"
  onProgress="onProgress"
  onRemove="onRemove"
/>