vue-simple-uploader 在vue3的使用

在 Vue 3 中使用 vue-simple-uploader 可以按照以下步骤进行：

1. 安装 vue-simple-uploader

npm install vue-simple-uploader

2. 在需要使用上传组件的组件中引入

import VueSimpleUploader from 'vue-simple-uploader'

3. 在组件中注册 vue-simple-uploader 组件

export default {
  components: {
    VueSimpleUploader
  }
}

4. 在模板中使用组件，并绑定相关属性

<template>
  <VueSimpleUploader
    ref="uploader"
    uploadUrl="your_upload_url"
    :headers="your_headers"
    :data="your_data"
    :multiple="true"
    :maxFileSize="10 * 1024 * 1024"
    @input-file="handleInputFile"
    @before-upload="handleBeforeUpload"
    @upload-progress="handleUploadProgress"
    @upload-success="handleUploadSuccess"
    @upload-error="handleUploadError"
  >
    <button>Choose file(s)</button>
  </VueSimpleUploader>
</template>

其中，`uploadUrl` 为上传文件的 URL，`headers` 为请求头部，`data` 为请求数据，`multiple` 表示是否支持多文件上传，`maxFileSize` 表示最大文件大小，`@input-file`、`@before-upload`、`@upload-progress`、`@upload-success` 和 `@upload-error` 分别为上传组件的事件，具体可以根据需求进行自定义处理。

5. 在组件中定义相关事件的处理方法

export default {
  methods: {
    handleInputFile(files) {
      console.log('input-file:', files)
    },
    handleBeforeUpload(file) {
      console.log('before-upload:', file)
    },
    handleUploadProgress(progress, bytesSent, totalBytes) {
      console.log('upload-progress:', progress, bytesSent, totalBytes)
    },
    handleUploadSuccess(response, file, xhr) {
      console.log('upload-success:', response, file, xhr)
    },
    handleUploadError(err, file, xhr) {
      console.log('upload-error:', err, file, xhr)
    }
  }
}

注意，`@input-file` 事件返回的是一个文件对象数组，`@before-upload`、`@upload-progress`、`@upload-success` 和 `@upload-error` 事件的回调参数分别为当前上传文件、上传文件对象和 XMLHttpRequest 对象。

以上就是在 Vue 3 中使用 vue-simple-uploader 的流程，希望对你有所帮助。