基于vue-simple-uploader的文件分片上传

<template>
  <div class="main_con">
        <uploader
          :options="options"
          :file-status-text="statusText"
          class="uploader-example"
          ref="uploader"
          @file-success="fileSuccess"
          @file-error="onFileError"
          @file-removed="fileRemoved"
          style="width: 100%;"
        >
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn>选择文件</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        target: '/file' + '/minio/upload', // 上传地址
        testChunks: false, //是否开启服务器分片校验
        maxChunkRetries: 5, //最大自动失败重试上传次数
        chunkSize: 1 * 1024 * 1024, //分片大小 这里设置10M
        singleFile: false, //单文件上传
        query: {
          fileType: 2, //传参
          fileDirName: 'imgs/',
        },
        categoryMap: {
          accept: ['.png', '.jpg', '.jpeg', '.gif', '.pdf', '.mp4'], //接受文件类型
        },
        headers: {
          // 在header中添加的验证，请根据实际业务来
          Authorization: 'Bearer ' + sessionStorage.getItem('access_token'),
        },
      },
      statusText: {
        success: '上传成功',
        error: '上传失败',
        uploading: '上传中',
        paused: '暂停中',
        waiting: '等待中',
      },
    }
  },
  mounted() {
    // 获取uploader对象
    this.$nextTick(() => {
      window.uploader = this.$refs.uploader.uploader
    })
  },
  methods: {
    //上传成功返回的信息
    fileSuccess(rootFile, file, message, chunk) {
      console.log(message)
    },
    // 上传错误触发，文件还未传输到后端
    onFileError(rootFile, file, response, chunk) {
      console.log(rootFile, file, response, chunk)
    },
    // 移除文件
    fileRemoved(file) {
            
    },

  },
}
</script>

标签：rootFile,vue,uploader,simple,chunk,file,分片,上传
来源： https://blog.csdn.net/weixin_43839531/article/details/122037405