vue 基于 el-upload 封装图片上传组件

好的，我可以为您提供一个基于 Vue 和 Element UI 的图片上传组件封装示例。这个组件使用了 Element UI 的 el-upload 组件，并添加了一些常用的功能，如文件选择、上传进度显示、上传成功和失败的处理等。

首先，您需要在 Vue 组件中引入 Element UI 和 el-upload 组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

接下来，您可以创建一个名为 UploadComponent 的 Vue 组件，并在其中使用 el-upload 组件：

<template>
  <el-upload
    action="https://example.com/upload" // 上传接口地址
    :before-upload="beforeUpload" // 上传前处理
    :on-success="onSuccess" // 上传成功处理
    :on-error="onError" // 上传失败处理
    :auto-upload="false" // 是否自动上传
    :upload-list="uploadList" // 已上传的文件列表
  >
    <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
  </el-upload>
</template>

在组件的 data 中定义一些常用的属性和方法：

export default {
  data() {
    return {
      uploadList: [], // 已上传的文件列表
    };
  },
  methods: {
    beforeUpload(file) {
      // 上传前处理，可以根据需要自定义逻辑
      return true;
    },
    onSuccess(response, file) {
      // 上传成功处理，可以根据需要自定义逻辑
      console.log('上传成功', response);
      return true; // 返回 true 表示上传成功，否则会取消上传操作
    },
    onError(error, file) {
      // 上传失败处理，可以根据需要自定义逻辑
      console.log('上传失败', error);
    },
  },
};

在上面的代码中，我们使用了 action 属性指定了上传接口地址，使用了 before-upload 方法对上传前的文件进行处理，使用了 on-success 和 onError 方法分别对上传成功和失败进行处理。我们还使用了 auto-upload 属性来控制是否自动上传，使用 uploadList 属性来保存已上传的文件列表。您可以根据实际需求修改这些属性和方法。

另外，您还可以在组件中使用其他 el-upload 组件的属性和方法，例如 :file-list、:show-upload-list、:max-file-size 等。这些属性和方法可以在 Element UI 的官方文档中找到。

希望这个示例对您有所帮助！如果您有任何问题，请随时提问。