vue-upload-component多文件切片上传样例

以下是使用 vue-upload-component 组件实现多文件切片上传的示例代码：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :multiple="true"
      :chunk-size="chunkSize"
      :post-action="uploadUrl"
      :headers="headers"
      :query="query"
      @upload-success="onSuccess"
      @upload-error="onError"
      @before-chunk-upload="onBeforeChunkUpload"
      @after-chunk-upload="onAfterChunkUpload"
      @before-upload="onBeforeUpload"
      @after-upload="onAfterUpload"
    >
      <button>选择文件</button>
    </vue-upload-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadUrl: 'your-upload-url',
        chunkSize: 2 * 1024 * 1024,  // 每个切片的大小，单位为字节
        headers: {  // 请求头
          'Authorization': 'Bearer your-token'
        },
        query: {  // 请求参数
          'param1': 'value1',
          'param2': 'value2'
        }
      }
    },
    methods: {
      onSuccess(response, file, fileList) {
        console.log('上传成功')
        console.log(response)
        console.log(file)
        console.log(fileList)
      },
      onError(err, file, fileList) {
        console.log('上传失败')
        console.log(err)
        console.log(file)
        console.log(fileList)
      },
      onBeforeChunkUpload(file, chunk) {
        console.log('开始上传切片')
        console.log(file)
        console.log(chunk)
      },
      onAfterChunkUpload(file, chunk, response) {
        console.log('切片上传完成')
        console.log(file)
        console.log(chunk)
        console.log(response)
      },
      onBeforeUpload(file, data) {
        console.log('开始上传')
        console.log(file)
        console.log(data)
      },
      onAfterUpload(response, file, fileList) {
        console.log('上传完成')
        console.log(response)
        console.log(file)
        console.log(fileList)
      }
    }
  }
</script>

在上面的代码中，除了基本的多文件上传属性外，还设置了以下属性：

- `chunk-size`：每个切片的大小，单位为字节。
- `headers`：请求头，用于传递认证信息等。
- `query`：请求参数，用于传递其他参数。
- `before-chunk-upload`：每个切片上传前的回调函数。
- `after-chunk-upload`：每个切片上传完成后的回调函数。
- `before-upload`：整个文件上传前的回调函数。
- `after-upload`：整个文件上传完成后的回调函数。

在回调函数中可以获取到上传的响应数据、上传的文件对象和文件列表等信息。