vue3 使用 plupload

在Vue3中使用Plupload的步骤如下：
1. 首先，你需要在项目中引入Plupload。你可以通过在GitHub上下载并安装Plupload，或者使用npm install --save plupload命令安装Plupload依赖。
2. 在Vue组件中实例化一个Plupload对象，并传入一个配置参数对象来进行各种配置。你可以根据需要配置上传方式、限制文件类型、压缩图片等功能。
3. 调用Plupload实例对象的init()方法进行初始化。这将初始化Plupload并准备好进行文件上传。
4. 在Plupload实例对象上注册你需要的事件。Plupload提供了多种事件，可以在文件选取、上传进度、上传完成等不同阶段与Plupload进行交互。

以下是一个在Vue3中使用Plupload的示例代码：

<template>
  <div>
    <plupload :file-list="theDialogForm.attachJsonArr" :limit="1" biz-type="trainModule" accept-files=".zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp" @onChange="handleFileChange" />
  </div>
</template>

<script>
import Plupload from 'plupload' // 引入Plupload库

export default {
  data() {
    return {
      theDialogForm: {
        attachJsonArr: [] // 文件列表
      }
    }
  },
  mounted() {
    const uploader = new Plupload({ // 实例化Plupload对象
      // 配置参数
    })
    uploader.init() // 初始化Plupload

    // 注册事件
    uploader.bind('FilesAdded', (uploader, files) => {
      // 当文件添加到上传队列时触发的事件
    })

    // 更多事件...
  },
  methods: {
    handleFileChange(fileList) {
      console.log('handleFileChange', fileList)
    }
  }
}
</script>

以上代码示例中，我们在Vue组件中引入了Plupload库，实例化了Plupload对象，并在mounted钩子函数中进行了初始化和事件的注册。同时，我们定义了一个handleFileChange方法来处理文件变化事件。你可以根据自己的需求进行相应的配置和事件处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>