vue+element 组件。

<template>
  <div>
    <el-upload
      class="upload-demo"
      multiple
      action="api"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :http-request="httpRequest"
      list-type="picture-card"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
      提示信息
      </div>
    </el-upload>
  </div>
</template>

vue代码

<script>
//引入自己的js 文件 如果报错参考 最下方jscofig.json配置
import * as myFileUtils from "./../../../static/myjs/bwFileUtil.js";
export default {
  name: "Home",
  data() {
    return {
      api:"/api/v1/wyiwfileUpload",
      fileList: [],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.info("files is " + JSON.stringify(file));
      console.info("fileList is " + JSON.stringify(fileList));
    },
    handlePreview(file) {
      console.log(file);
    },
    httpRequest(option) {
    //获取文件对象
      var file = option.file
      console.info("files is " + JSON.stringify(file));
      console.info("filesName is " + JSON.stringify(file.name));
      var fileName = "_"+file.name;
      //保证文件唯一性 后端作为合并文件的条件
      var timestamp = new Date().getTime();
      //调用自己封装的文件上传 js 方法
       myFileUtils.fileUpload(file, timestamp, 0, timestamp+fileName, this.api)
    },
  },
  created: function init(params) {},
};
</script>

js 文件上传 源代码static/myjs/bwFileUtil.js。

function filesUpload(files, api) {
    for (let index = 0; index < files.length; index++) {
        const file = files[index];
        console.info("file size is :" + file.size)
        var timestamp = new Date().getTime();
        var fileName = "_"+file.name;
        fileUpload(file, timestamp, 0, timestamp+fileName, api)
    }
}

function fileUpload(file, timestamp, i, fileName, api) {
    console.info("file  fileName is : " + fileName)
    var name = file.name,                           //文件名
        size = file.size,                           //总大小shardSize = 2 * 1024 * 1024,
        shardSize = 2 * 1024 * 1024,                //以2MB为一个分片,每个分片的大小
        shardCount = Math.ceil(size / shardSize);  //总片数
    if (i > shardCount) {
        return;
    }
    //console.log(size,i+1,shardSize);  //文件总大小，第一次，分片大小//
    var start = i * shardSize;
    var end = start + shardSize;
    var packet = file.slice(start, end);  //将文件进行切片
    /*  构建form表单进行提交  */
    var form = new FormData();
    form.append("fileId", timestamp)
    form.append("data", packet); //slice方法用于切出文件的一部分
    form.append("name", name);
    form.append("totalSize", size);
    form.append("fileName",fileName)
    if (shardCount === i + 1) {
        shardSize = size - i * shardSize
    }
    form.append("shardSize", shardSize);
    form.append("total", shardCount); //总片数
    form.append("index", i+1); //当前是第几片
    $.ajax({
        header: {
            //可以换成自己接口服务鉴权的token
            token: "cpBvqWrr0UK9zPJoKj+412alxxcY6qFwrSVoO0juZg0S1jX/sGfMd9oi3AsSxW+MdWFrwtGCykUTmMqrqpbCElmT75DfB87lENC7lCuMxgF0d5wQB6yAubUVyGOzhbrScvIfD8ZSjOJ3D88AOy2xRd4oG8TxeGoMoZqnqIwjKg="
        },
        url: api,
        type: "POST",
        data: form,
        //timeout:"10000",  //可以设置超时时间
        async: true, //异步
        dataType: "json",
        processData: false, //很重要，告诉jquery不要对form进行处理
        contentType: false, //很重要，指定为false才能形成正确的Content-Type
        success: function (msg) {
            console.log(msg);
            /*  表示上一块文件上传成功，继续下一次  */
            if (msg.data.status == 201) {
                form = '';
                i++;
                // PostFile(file, i);
                fileUpload(file, timestamp, i, fileName, api)
            } else if (msg.data.status == 502) {
                form = '';
                /*  失败后，每2秒继续传一次分片文件  */
                // fileUpload(file, timestamp, i, index, api)
                console.error("服务器error "+msg)
            } else if (msg.data.status == 200) {
                console.log("上传成功");
            } else if (msg.data.status == 500) {
                console.log('第' + msg.i + '次，上传文件有误！');
            } else {
                console.log('未知错误');
            }
        }
    })
}

export {
    filesUpload,fileUpload
}

效果

jsconfig.json配置（如果自己引入自己的js文件可以使用请忽略）

{
  "include": [
    "./src/**/*",
    //配置自己存放的js目录
    "static/myjs"
  ],
}