vue2+Spring Boot2.7 大文件分片上传

这篇具有很好参考价值的文章主要介绍了vue2+Spring Boot2.7 大文件分片上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

之前我们文章 手把手带大家实现 vue2+Spring Boot2.7 文件上传功能 将了上传文件
但如果文件很大 就不太好处理了 按正常情况甚至因为超量而报错

这里 我弄了个足够大的文件
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
我们先搭建 Spring Boot2.7 环境
首先 application.yml 代码编写如下

server:
  port: 80
upload:
  path: D:/upload/
spring:
  servlet:
    multipart:
      max-file-size: 500MB
      max-request-size: 500MB

这里 我们改了他对请求大小的限制 不然 你上次300M左右的东西 系统直接抛异常了

然后 我们将FileUploadController 类代码更改如下

package com.example.javadom.controller;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

@RestController
public class FileUploadController {

    //读取配置文件中的 upload下的path
    @Value("${upload.path}")
    private String uploadPath;

    @PostMapping("/upload")
    public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
        // 处理上传逻辑,可以根据需要保存文件到指定目录
        // 这里假设保存到D:/upload/目录下
        try {
            String filePath = uploadPath + file.getOriginalFilename();
            file.transferTo(new File(filePath));
            // 进行后续处理,比如返回成功消息给前端
            return ResponseEntity.ok("File uploaded successfully");
        } catch (IOException e) {
            e.printStackTrace();
            // 发生错误时,返回错误消息给前端
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file");
        }
    }
}

然后 我们vue代码 将 App.vue改成这样

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <button @click="uploadFile">Upload</button>
    <div v-if="uploadProgress !== null">
      Upload progress: {{ uploadProgress }}%
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      uploadProgress: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios
        .post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          onUploadProgress: (progressEvent) => {
            this.uploadProgress = Math.round(
              (progressEvent.loaded / progressEvent.total) * 100
            );
          },
        })
        .then((response) => {
          console.log('Upload successful',response);
        })
        .catch((error) => {
          console.error('Upload failed', error);
        });
    },
  },
};
</script>

然后 我们将项目运行起来
这是我们的vue界面
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
然后 我们看到 D盘下的upload
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
还是只有上文的两个图片
然后 我们点击页面中的 选择文件
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
将我们的大文件放进来
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
然后我们点击 Upload

我们可以看到 请求还没返回前 onUploadProgress 就在跑了
axios的onUploadProgress 是一个专门用来监听文件上传的事件 有兴趣可以自己去了解一下
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
文件上传完 进度就会100 请求也返回了
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
我们看看文件夹
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
我们打开文件看一下
vue2+Spring Boot2.7 大文件分片上传,spring boot,后端,java
也是没有任何问题文章来源地址https://www.toymoban.com/news/detail-670100.html

到了这里,关于vue2+Spring Boot2.7 大文件分片上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Spring Boot2.0 & HTTP/2 实现服务器、客户端

    HTTP协议由于其无状态的特性以及超高的普及率,是当下大部分网站选择使用的应用层协议。然而,HTTP/1.x的底层传输方式的几个特性,已经对应用的整体性能产生了负面影响。特别是,HTTP/1.0在每次的TCP连接上只允许发送一次请求,在HTTP/1.1中增加了请求管线,但是这仅仅解决

    2023年04月09日
    浏览(69)
  • spring boot文件上传

    文件上传,是指将本地图片、视频、音频等文件上传到服务器,供其他用户浏览或下载的过程。 文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能。 前端代码: 后端代码: 对于阿里云的oss的使用可阅读对象存储 OSS官方文档 导入依赖

    2024年02月08日
    浏览(48)
  • 【Spring boot+VUE2+Android 7.1】智慧校园源码

    一、智慧校园实现了智慧校园基础数据的统一管理,通过此平台提供教师基础信息管理、学生基础信息管理、用户认证管理、权限管理、资源管理、应用管理、第三方应用接入等基础功能与服务。 二、源码包含:电子班牌管理系统、成绩管理系统、考勤人脸刷卡管理系统、综

    2024年02月13日
    浏览(42)
  • Spring Boot 实现多文件上传

    代码结构: Controller层 跨域拦截器配置 application.properties 配置 前端页面 效果展示 获取图片的url并且读取图片 修改tomcat的server.xml文件 加上下面这句

    2023年04月08日
    浏览(46)
  • Spring Boot中实现文件上传

    要在Spring Boot中实现文件上传,可以按照以下步骤进行操作: 添加依赖:在Maven或Gradle配置文件中添加Spring Boot Web相关的依赖。 创建文件上传接口:创建一个控制器(Controller)类,定义文件上传的接口。例如: java复制代码 import org.springframework.web.bind.annotation.PostMapping; impor

    2024年02月12日
    浏览(41)
  • Spring Boot 设置上传文件大小限制

    在开发 Web 应用程序时,我们通常需要处理文件上传功能。为了确保系统的安全性和稳定性,我们需要限制上传文件的大小。本篇博客将介绍如何使用 Spring Boot 设置上传文件大小限制。 1. application.properties 配置文件 Spring Boot 提供了一种简单的方式来配置上传文件大小限制。首

    2024年02月04日
    浏览(88)
  • spring boot 上传文件的大小限制

    根据spring boot 版本不同在application.properties文件添加不同的配置 Spring Boot 1.3 或之前的版本,配置: Spring Boot 1.4 版本后配置更改为: Spring Boot 2.0 之后的版本配置修改为: 单位Mb改为MB了: 以上配置直接在配置文件中即可

    2024年02月07日
    浏览(52)
  • Spring Boot实现文件上传和下载

    1.文件上传 在pom.xml文件中添加依赖: spring-boot-starter-web 和 spring-boot-starter-thymeleaf 。 创建一个上传前端的页面,包括一个表单来选择文件和一个提交按钮。 在Controller中添加一个POST方法,该方法接受 MultipartFile 参数,将文件保存在服务器上。 在application.properties文件中配置上

    2024年02月04日
    浏览(45)
  • Spring Boot实现HTTP大文件断点续传分片下载-大视频分段渐进式播放

    服务端如何将一个大视频文件做切分,分段响应给客户端,让浏览器可以渐进式地播放。 Spring Boot实现HTTP分片下载断点续传,从而实现H5页面的大视频播放问题,实现渐进式播放,每次只播放需要播放的内容就可以了,不需要加载整个文件到内存中。 文件的断点续传、文件多

    2024年02月14日
    浏览(75)
  • Spring Boot 中实现文件上传、下载、删除功能

    🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论⭐收藏 🔎 SpringBoot 领域知识 🔎 链接 专栏 SpringBoot 专业知识学习一 SpringBoot专栏 Sprin

    2024年01月19日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包