Vue中图片上传组件封装-antd的a-upload二次封装的实例

一、背景

在Vue项目中，我们经常会使用上传图片的功能，而Ant Design Vue提供了一个非常方便的组件——a-upload，但是它的样式和功能可能无法满足我们的需求。因此，我们需要对它进行二次封装，定制我们需要的功能和样式。

二、封装步骤

1. 创建一个Upload组件，在里面引入a-upload组件。

<template>
  <a-upload :show-upload-list="showUploadList" :multiple="multiple" :headers="headers" :action="action">
    <a-icon slot="upload-icon" type="plus" />
    <div class="ant-upload-text">{{ buttonText }}</div>
  </a-upload>
</template>
<script>
  import { Upload as AntdUpload, Icon } from 'ant-design-vue';
  export default {
    name: 'Upload',
    components: { 'a-upload': AntdUpload.Upload, 'a-icon': Icon },
    props: {
      showUploadList: {
        type: Boolean,
        default: true
      },
      multiple: {
        type: Boolean,
        default: false
      },
      headers: {
        type: Object,
        default: () => ({})
      },
      action: {
        type: String,
        default: ''
      },
      buttonText: {
        type: String,
        default: '上传'
      }
    }
  }
</script>

在使用a-upload组件时，我们可以通过props来传递需要的参数，例如：是否显示上传列表、是否可多选、上传时携带的header、上传接口、按钮上的文字等。

1. 在Upload组件中增加上传之前的校验。

<template>
  <a-upload :show-upload-list="showUploadList" :multiple="multiple" :headers="headers" :before-upload="beforeUpload" :action="action">
    <a-icon slot="upload-icon" type="plus" />
    <div class="ant-upload-text">{{ buttonText }}</div>
  </a-upload>
</template>
<script>
  // ...props定义同上
  export default {
    // ...组件名、组件引用和props传递参数同上
    methods: {
      beforeUpload(file, fileList) {
        // 返回false可以阻止文件上传
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isGIF = file.type === 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!(isJPG || isPNG || isBMP || isGIF)) {
          this.$message.error('请上传jpg、png、bmp、gif格式的图片');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传的图片大小不能超过2MB');
          return false;
        }
        return true;
      }
    }
  }
</script>

1. 在Upload组件中增加上传成功和上传失败的回调函数。

<template>
  <a-upload :show-upload-list="showUploadList" :multiple="multiple" :headers="headers" :before-upload="beforeUpload" :action="action" @success="onSuccess" @error="onError">
    <a-icon slot="upload-icon" type="plus" />
    <div class="ant-upload-text">{{ buttonText }}</div>
  </a-upload>
</template>
<script>
  // ...props定义和校验同上
  export default {
    // ...组件名、组件引用和props传递参数同上
    methods: {
      beforeUpload(file, fileList) {
        // ...校验代码同上
      },
      onSuccess(response, file, fileList) {
        this.$emit('success', response, file, fileList);
      },
      onError(error, response, file, fileList) {
        this.$emit('error', error, response, file, fileList);
        this.$message.error('上传失败');
      }
    }
  }
</script>

在上传成功和上传失败的回调函数中，我们可以通过this.$emit('success', response, file, fileList)来将上传成功的响应和相关的参数传递给父组件，父组件可监听@success事件来处理这些参数。对于上传失败的情况，我们在回调函数中弹出一个错误提示框。

1. 在Upload组件中增加自定义样式。

<template>
  <a-upload :show-upload-list="showUploadList" :multiple="multiple" :headers="headers" :before-upload="beforeUpload" :action="action" @success="onSuccess" @error="onError">
    <a-icon slot="upload-icon" type="plus" />
    <div class="ant-upload-text">{{ buttonText }}</div>
  </a-upload>
</template>
<script>
  // ...props定义和校验、回调函数同上
  export default {
    // ...组件名、组件引用、props传递参数同上
    methods: {
      // ...校验、回调函数同上
    },
    mounted() {
      const uploadButton = this.$el.querySelector('.ant-upload');
      uploadButton.style.width = '128px';
      uploadButton.style.height = '128px';
      uploadButton.style.backgroundColor = '#f0f0f0';
    }
  }
</script>
<style scoped>
  .ant-upload-select-picture-card {
    display: inline-block;
    width: 128px;
    height: 128px;
    margin-bottom: 0;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    transition: border-color .3s ease;
  }
  .ant-upload-select-picture-card:hover {
    border-color: #1890ff;
  }
  .ant-upload-text {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
  }
  .ant-upload-list-item-actions {
    display: none;
  }
</style>

在样式中，我们修改了上传组件的宽高和边框样式，同时隐藏了上传列表项的删除按钮。

三、使用上传组件

我们在任意Vue组件中使用刚才封装好的Upload组件，用到的参数包括：是否显示上传列表、是否可多选、上传时携带的header、上传接口、按钮上的文字等。

<template>
  <div>
    <Upload :showUploadList="false" :multiple="true" :headers="headers" :action="action" @success="uploadSuccess" @error="uploadError" buttonText="上传图片" />
    <Button @click="handleUpload">上传</Button>
  </div>
</template>
<script>
  import Upload from '@/components/Upload';
  import { Button } from 'ant-design-vue';
  export default {
    name: 'Demo',
    components: { Upload, Button },
    data() {
      return {
        headers: {
          Authorization: 'Bearer token'
        },
        action: '/api/upload'
      }
    },
    methods: {
      uploadSuccess(response, file, fileList) {
        console.log(response);
      },
      uploadError(error, response, file, fileList) {
        console.log(error);
      },
      handleUpload() {
        const uploadInstance = this.$refs.upload;
        uploadInstance.$children[0].uploadFiles();
      }
    }
  }
</script>

上面的示例中，我们使用了Upload组件，并传递了需要的参数。在点击“上传”按钮时，我们获取到Upload组件实例，然后调用uploadFiles方法上传文件。

四、总结

通过以上步骤，我们成功地对a-upload组件进行了二次封装，提供了给定的上传功能并增加了一些自定义的功能和样式。在使用时，我们只需要传递需要的参数即可实现上传功能。