大文件分片上传 java+vue

小小小小小小小阳

于 2025-02-14 10:28:33 发布

阅读量797

点赞数 26

文章标签： vue.js java

本文链接：https://blog.youkuaiyun.com/weixin_39267497/article/details/145627559

版权

在实际的项目过程中常常会出现单文件过大而导致上传相关的问题，本文旨在解决大文件上传-----分片上传。
话不多直接上代码：

前端代码

<template>
  <div>
    <el-upload
      ref="upload"
      action="http://localhost:8080/file/upload"
      :http-request="uploadFile"
      :on-change="handleChange"
      :auto-upload="false"
      :file-list="fileList"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button slot="trigger" type="primary">选取文件</el-button>
      <el-button type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传文件，且不超过100MB</div>
    </el-upload>
    <el-progress :percentage="uploadPercentage" v-if="uploadPercentage > 0 && uploadPercentage < 100"></el-progress>
  </div>
</template>

<script>import axios from 'axios';

export default {
     
  data() {
     
    return {
     
      fileList: [],
      uploadPercentage: 0,
      chunkSize: 1024 * 1024, // 1MB
      chunks: [],</