van-uploader 使用

Van-Uploader是一个用于Vue.js框架的轻量级文件上传组件库，它简化了前端图片、视频等文件的上传操作。Van-Uploader提供了一套易于使用的API和丰富的功能，如拖拽上传、预览、错误处理、进度显示以及自定义上传策略等。它支持多种上传方式，包括常规的表单提交和HTML5 File API，并且可以方便地与其他UI库配合使用，如Element Plus或Vuetify。

使用Van-Uploader通常涉及以下几个步骤：
1. 安装：在Vue项目中通过npm或yarn安装`@vueuploader/core`和需要的其他插件。

npm install @vueuploader/core

2. 引入并注册：在main.js或某个组件的入口文件中引入并配置。

import VueUploader from '@vueuploader/core'
Vue.use(VueUploader)

3. 在模板中使用组件：创建一个`<van-uploader>`元素，并设置所需的属性，如上传路径、接受类型等。

<template>
  <van-uploader ref="uploader" :action="uploadUrl" :before-upload="beforeUpload" />
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      // 自定义验证或修改文件
    }
  },
  data() {
    return {
      uploadUrl: '/api/upload',
    };
  }
}
</script>

4. 调用方法：可以利用`ref`引用组件并触发上传、暂停、取消等操作。

this.$refs.uploader.submit()