vue3 好用的上传组件

在 Vue 3 中，你可以使用 `vue-upload-component` 这个第三方库来实现文件上传。这个组件库提供了一些好用的特性，例如文件拖拽、进度条显示、多文件上传、文件选择限制等等。此外，它也支持 TypeScript。

你可以通过 npm 安装这个库：

npm install vue-upload-component

然后在你的 Vue 组件中使用它，例如：

<template>
  <div>
    <upload
      ref="upload"
      v-bind="uploadOptions"
      @input-filter="handleInputFilter"
      @input-file="handleInputFile"
    >
      <button>选择文件</button>
    </upload>
  </div>
</template>

<script>
import Upload from 'vue-upload-component'

export default {
  components: {
    Upload
  },
  data() {
    return {
      uploadOptions: {
        target: 'http://example.com/upload',
        accept: 'image/*',
        multiple: true,
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        }
      }
    }
  },
  methods: {
    handleInputFilter() {
      // 过滤文件的回调函数
    },
    handleInputFile() {
      // 文件上传完成的回调函数
    }
  }
}
</script>

在这个例子中，我们引入了 `vue-upload-component` 组件，并在模板中使用了它。`uploadOptions` 对象中定义了上传的一些选项，例如上传目标地址、接受的文件类型、是否允许多文件上传、请求头等等。我们还定义了 `handleInputFilter` 和 `handleInputFile` 两个回调函数，分别用于过滤文件和上传完成后的处理。