vue3+vite使用webuploader

在 Vue.js 3 + Vite 中使用 WebUploader，可以按照以下步骤进行：

1. 安装 WebUploader

npm install webuploader --save

2. 在 `main.js` 文件中引入 WebUploader

import 'webuploader/dist/webuploader.css'
import WebUploader from 'webuploader'

Vue.prototype.$webuploader = WebUploader

3. 在组件中使用 WebUploader

<template>
  <div>
    <div id="uploader"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const uploader = this.$webuploader.create({
      auto: true,
      swf: '/static/Uploader.swf',
      server: '/upload',
      pick: {
        id: '#uploader',
        multiple: false
      }
    })

    uploader.on('uploadSuccess', (file, response) => {
      console.log('上传成功', file, response)
    })

    uploader.on('uploadError', (file, reason) => {
      console.log('上传失败', file, reason)
    })
  }
}
</script>

<style>
/* 样式省略 */
</style>

在上述示例中，我们首先在 `main.js` 文件中引入了 WebUploader，并将其挂载到 Vue 的原型上，以便在组件中使用。然后，在组件的 `mounted` 钩子函数中，我们创建了一个 WebUploader 实例，并设置了一些选项。最后，我们通过监听 `uploadSuccess` 和 `uploadError` 事件来处理上传成功和上传失败的情况。

注意，在使用 WebUploader 的过程中，您可能需要根据实际情况修改上传路径、文件类型、上传大小等相关选项。