Vue3.0移动端二次封装van-uploader实现上传图片的方法

在移动端开发中，图片上传是一个常见的需求。Vant UI 是一个轻量级的移动端组件库，其中的 van-uploader 组件提供了图片上传的功能。然而，在实际项目中，我们通常需要对 van-uploader 进行二次封装，以满足特定的业务需求。本文将介绍如何在 Vue3.0 中二次封装 van-uploader 组件，实现图片上传功能。

1. 安装 Vant UI

首先，我们需要安装 Vant UI 组件库。可以通过 npm 或 yarn 进行安装：

npm install vant

或者

yarn add vant

2. 引入 van-uploader 组件

在 Vue3.0 项目中，我们可以按需引入 van-uploader 组件。首先，在 main.js 中引入 Vant UI 的样式和组件：

import { createApp } from 'vue';
import App from './App.vue';
import { Uploader } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(Uploader);
app.mount('#app');

3. 二次封装 van-uploader 组件

接下来，我们将对 van-uploader 进行二次封装，以满足特定的业务需求。我们将创建一个名为 ImageUploader.vue 的组件，用于处理图片上传的逻辑。

3.1 创建 ImageUploader.vue 组件

<template>
  <div class="image-uploader">
    <van-uploader
      v-model="fileList"
      :max-count="maxCount"
      :after-read="afterRead"
      :before-read="beforeRead"
      :disabled="disabled"
      :accept="accept"
      :multiple="multiple"
      @oversize="onOversize"
      @delete="onDelete"
    >
      <template #default>
        <van-icon name="plus" size="24" />
      </template>
    </van-uploader>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  name: 'ImageUploader',
  props: {
    maxCount: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    accept: {
      type: String,
      default: 'image/*',
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const fileList = ref([]);

    const beforeRead = (file) => {
      if (file.type.indexOf('image') === -1) {
        Toast('请上传图片文件');
        return false;
      }
      return true;
    };

    const afterRead = (file) => {
      // 处理上传逻辑
      emit('upload', file);
    };

    const onOversize = () => {
      Toast('文件大小超出限制');
    };

    const onDelete = (file) => {
      emit('delete', file);
    };

    return {
      fileList,
      beforeRead,
      afterRead,
      onOversize,
      onDelete,
    };
  },
};
</script>

<style scoped>
.image-uploader {
  display: inline-block;
}
</style>

3.2 使用 ImageUploader 组件

在父组件中使用 ImageUploader 组件，并处理上传和删除事件：

<template>
  <div>
    <ImageUploader
      :max-count="3"
      @upload="handleUpload"
      @delete="handleDelete"
    />
  </div>
</template>

<script>
import ImageUploader from './components/ImageUploader.vue';

export default {
  components: {
    ImageUploader,
  },
  methods: {
    handleUpload(file) {
      // 处理上传逻辑
      console.log('上传文件:', file);
    },
    handleDelete(file) {
      // 处理删除逻辑
      console.log('删除文件:', file);
    },
  },
};
</script>

4. 实现图片上传逻辑

在实际项目中，我们通常需要将图片上传到服务器。可以通过 axios 或其他 HTTP 库来实现上传逻辑。以下是一个简单的示例：

import axios from 'axios';

const handleUpload = async (file) => {
  const formData = new FormData();
  formData.append('file', file.file);

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    console.log('上传成功:', response.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

5. 总结

通过二次封装 van-uploader 组件，我们可以更好地控制图片上传的逻辑，并满足特定的业务需求。本文介绍了如何在 Vue3.0 中实现这一功能，并提供了一个简单的示例。希望本文对你有所帮助，祝你在移动端开发中取得成功！