Vant Uploader 使用教程：图片、视频、音频上传组件

Vant Uploader 是一个基于 Vue.js 的上传组件，可以用于上传图片、视频、音频等文件。使用 Vant Uploader 可以轻松实现文件上传功能，支持多选、拍照、压缩等功能。

使用 Vant Uploader 的步骤如下：

1. 引入 Vant Uploader 组件

在需要使用上传功能的页面中，引入 Vant Uploader 组件。

<template>
  <van-uploader
    :url='uploadUrl'
    :before-upload='beforeUpload'
    :on-success='onSuccess'
    :on-error='onError'
    accept='image/*'
    multiple
  />
</template>

<script>
import { Uploader } from 'vant';

export default {
  components: {
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      uploadUrl: 'your upload url',
    };
  },
  methods: {
    beforeUpload(file) {
      // 文件上传前的处理逻辑
    },
    onSuccess(response, file) {
      // 文件上传成功的处理逻辑
    },
    onError(error, file) {
      // 文件上传失败的处理逻辑
    },
  },
};
</script>

2. 配置上传相关参数

在组件的 template 中配置上传组件的相关参数，例如上传路径、上传前的处理逻辑、上传成功的处理逻辑、上传失败的处理逻辑、支持的文件类型等。

3. 在 methods 中定义上传相关方法

在 methods 中定义上传相关的方法，例如 beforeUpload、onSuccess、onError 等方法，用于处理上传前、上传成功、上传失败等情况下的逻辑。

4. 调用上传方法

在需要上传文件的时候，调用 Vant Uploader 组件的上传方法即可。

this.$refs.uploader.upload();

以上就是使用 Vant Uploader 的基本步骤，根据实际需求可以进行个性化定制。