vue项目上传文件切片

Vue项目上传文件切片可以使用第三方库vue-upload-component来实现。该库支持文件切片上传、进度条显示、取消上传等功能。

首先，安装vue-upload-component：

npm install vue-upload-component --save

然后，在需要上传文件的组件中引入vue-upload-component：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :url="uploadUrl"
      :headers="headers"
      :data="uploadData"
      :multiple="false"
      :accept="'*'"
      :extensions="[]"
      :max-size="0"
      :with-credentials="false"
      :input-id="'file'"
      :drop="true"
      :drop-directory="false"
      :drop-chunk-size="0"
      :drop-chunk-threads="1"
      :drop-delay="0"
      :drop-timeout="0"
      :chunk-size="5 * 1024 * 1024"
      :chunk-retries="3"
      :chunk-simultaneous-uploads="3"
      @input-filter="inputFilter"
      @input-file="inputFile"
      @input-clear="inputClear"
      @before-upload="beforeUpload"
      @start="startUpload"
      @progress="progressUpload"
      @success="successUpload"
      @error="errorUpload"
      @abort="abortUpload">
    </vue-upload-component>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  data () {
    return {
      uploadUrl: 'your_upload_url',
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
      },
      uploadData: {
        'foo': 'bar'
      }
    }
  },
  methods: {
    inputFilter (newFile, oldFile, prevent) {
      // 文件过滤
    },
    inputFile (file) {
      // 文件选择
    },
    inputClear () {
      // 清空文件选择
    },
    beforeUpload (file) {
      // 文件上传前的处理
    },
    startUpload () {
      // 开始上传
    },
    progressUpload (progress) {
      // 上传进度
    },
    successUpload (response) {
      // 上传成功
    },
    errorUpload (error) {
      // 上传失败
    },
    abortUpload () {
      // 取消上传
    }
  }
}
</script>

其中，`chunk-size`表示切片大小，`chunk-retries`表示切片上传失败后的重试次数，`chunk-simultaneous-uploads`表示同时上传的切片数量。