springboot+jpa+vue实现大文件断点续传

最新推荐文章于 2024-04-30 14:55:09 发布
最新推荐文章于 2024-04-30 14:55:09 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： springboot vue 断点续传 文章标签： spring boot vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43966689/article/details/105330298
版权
springboot 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏
断点续传
1 篇文章 0 订阅
订阅专栏

断点续传

导入sql,如果里面有数据清除即可

/*
 Navicat Premium Data Transfer

 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 50723
 Source Host           : localhost:3306
 Source Schema         : test

 Target Server Type    : MySQL
 Target Server Version : 50723
 File Encoding         : 65001

 Date: 05/04/2020 17:43:14
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for chunk
-- ----------------------------
DROP TABLE IF EXISTS `chunk`;
CREATE TABLE `chunk`  (
  `id` bigint(20) NOT NULL,
  `chunk_number` int(11) NOT NULL,
  `chunk_size` bigint(20) NOT NULL,
  `current_chunk_size` bigint(20) NOT NULL,
  `filename` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `identifier` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `relative_path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `total_chunks` int(11) NOT NULL,
  `total_size` bigint(20) NOT NULL,
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of chunk
-- ----------------------------
INSERT INTO `chunk` VALUES (1, 1, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (2, 2, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (3, 3, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (4, 4, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (5, 5, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (6, 6, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (7, 6, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (8, 7, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (9, 8, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (10, 9, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (11, 10, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (12, 11, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (13, 12, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (14, 13, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (15, 14, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (16, 15, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (17, 16, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (18, 17, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (19, 18, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (20, 19, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (21, 20, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (22, 21, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (23, 22, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (24, 23, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (25, 24, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (26, 25, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (27, 26, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (28, 27, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (29, 28, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (30, 29, 10485760, 10485760, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);
INSERT INTO `chunk` VALUES (31, 30, 10485760, 14466741, 'f30.mp4', '318553781-f30mp4', 'f30.mp4', 30, 318553781, NULL);

-- ----------------------------
-- Table structure for file_info
-- ----------------------------
DROP TABLE IF EXISTS `file_info`;
CREATE TABLE `file_info`  (
  `id` bigint(20) NOT NULL,
  `filename` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `identifier` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `location` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `total_size` bigint(20) NOT NULL,
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of file_info
-- ----------------------------
INSERT INTO `file_info` VALUES (32, 'f30.mp4', '318553781-f30mp4', 'D:/upload/318553781-f30mp4/f30.mp4', 318553781, 'video/mp4');

-- ----------------------------
-- Table structure for hibernate_sequence
-- ----------------------------
DROP TABLE IF EXISTS `hibernate_sequence`;
CREATE TABLE `hibernate_sequence`  (
  `next_val` bigint(20) NULL DEFAULT NULL
) ENGINE = MyISAM CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Fixed;

-- ----------------------------
-- Records of hibernate_sequence
-- ----------------------------
INSERT INTO `hibernate_sequence` VALUES (33);
INSERT INTO `hibernate_sequence` VALUES (33);

SET FOREIGN_KEY_CHECKS = 1;

创建springboot项目，并导入依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>boot-upload</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>boot-upload</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <lombok.version>1.16.20</lombok.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>${lombok.version}</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

创建实体类

@Data
@Entity
@Table(name = "chunk")
public class Chunk {
    @Id
    @GeneratedValue
    private Long id;
    /**
     * 当前文件块，从1开始
     */
    @Column(nullable = false)
    private Integer chunkNumber;
    /**
     * 分块大小
     */
    @Column(nullable = false)
    private Long chunkSize;
    /**
     * 当前分块大小
     */
    @Column(nullable = false)
    private Long currentChunkSize;
    /**
     * 总大小
     */
    @Column(nullable = false)
    private Long totalSize;
    /**
     * 文件标识
     */
    @Column(nullable = false)
    private String identifier;
    /**
     * 文件名
     */
    @Column(nullable = false)
    private String filename;
    /**
     * 相对路径
     */
    @Column(nullable = false)
    private String relativePath;
    /**
     * 总块数
     */
    @Column(nullable = false)
    private Integer totalChunks;
    /**
     * 文件类型
     */
    @Column
    private String type;

    @Transient
    private MultipartFile file;
}

package com.example.bootupload.model;

import lombok.Data;

import javax.persistence.*;
import java.io.Serializable;

/**
 * @author 李云江
 * @Description: 文件信息$
 * @date 2020-04-05 17:02
 */
@Data
@Entity
@Table(name = "file_info")
public class FileInfo implements Serializable {
    @Id
    @GeneratedValue
    private Long id;

    @Column(nullable = false)
    private String filename;

    @Column(nullable = false)
    private String identifier;

    @Column(nullable = false)
    private Long totalSize;

    @Column(nullable = false)
    private String type;

    @Column(nullable = false)
    private String location;
}
定义dao接口和业务层代码
public interface FileInfoRepository extends JpaRepository<FileInfo,Long> {
}

public interface ChunkRepository extends JpaRepository<Chunk, Long>, JpaSpecificationExecutor<Chunk> {
}

public interface ChunkService {
    /**
     * 保存文件块
     *
     * @param chunk
     */
    void saveChunk(Chunk chunk);

    /**
     * 检查文件块是否存在
     *
     * @param identifier
     * @param chunkNumber
     * @return
     */
    boolean checkChunk(String identifier, Integer chunkNumber);
}

public interface FileInfoService {

    FileInfo addFileInfo(FileInfo fileInfo);

}

@Service
public class ChunkServiceImpl implements ChunkService {
    @Resource
    private ChunkRepository chunkRepository;
    @Override
    public void saveChunk(Chunk chunk) {
        chunkRepository.save(chunk);
    }

    @Override
    public boolean checkChunk(String identifier, Integer chunkNumber) {
        Specification<Chunk> specification = (Specification<Chunk>) (root, criteriaQuery, criteriaBuilder) -> {
            List<Predicate> predicates = new ArrayList<>();
            predicates.add(criteriaBuilder.equal(root.get("identifier"), identifier));
            predicates.add(criteriaBuilder.equal(root.get("chunkNumber"), chunkNumber));

            return criteriaQuery.where(predicates.toArray(new Predicate[predicates.size()])).getRestriction();
        };

        return chunkRepository.findOne(specification).orElse(null) == null;
    }
}

@Service
public class FileInfoServiceImpl implements FileInfoService {
    @Resource
    private FileInfoRepository fileInfoRepository;

    @Override
    public FileInfo addFileInfo(FileInfo fileInfo) {
        return fileInfoRepository.save(fileInfo);
    }
}
控制层controller
@RestController
@RequestMapping("/uploader")
@Slf4j
public class UploadController {
    @Value("${prop.upload-folder}")
    private String uploadFolder;
    @Resource
    private FileInfoService fileInfoService;
    @Resource
    private ChunkService chunkService;

    @PostMapping("/chunk")
    public String uploadChunk(Chunk chunk) {
        MultipartFile file = chunk.getFile();
        log.debug("file originName: {}, chunkNumber: {}", file.getOriginalFilename(), chunk.getChunkNumber());
        try {
            byte[] bytes = file.getBytes();
            Path path = Paths.get(generatePath(uploadFolder, chunk));
            //文件写入指定路径
            Files.write(path, bytes);
            log.debug("文件 {} 写入成功, uuid:{}", chunk.getFilename(), chunk.getIdentifier());
            chunkService.saveChunk(chunk);

            return "文件上传成功";
        } catch (IOException e) {
            e.printStackTrace();
            return "后端异常...";
        }
    }

    @GetMapping("/chunk")
    public Object checkChunk(Chunk chunk, HttpServletResponse response) {
        if (chunkService.checkChunk(chunk.getIdentifier(), chunk.getChunkNumber())) {
            response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);
        }

        return chunk;
    }

    @PostMapping("/mergeFile")
    public String mergeFile(FileInfo fileInfo) {
        String filename = fileInfo.getFilename();
        String file = uploadFolder + "/" + fileInfo.getIdentifier() + "/" + filename;
        String folder = uploadFolder + "/" + fileInfo.getIdentifier();
        merge(file, folder, filename);
        fileInfo.setLocation(file);
        fileInfoService.addFileInfo(fileInfo);

        return "合并成功";
    }
}
FileUtils工具类
@Slf4j
public class FileUtils {
    /**
     * @description:文件路径
     * @author: 李云江
     * @date: 2020/4/5
     */
    public static String generatePath(String uploadFolder, Chunk chunk) {
        StringBuilder sb = new StringBuilder();
        sb.append(uploadFolder).append("/").append(chunk.getIdentifier());
        //判断uploadFolder/identifier 路径是否存在，不存在则创建
        if (!Files.isWritable(Paths.get(sb.toString()))) {
            log.info("path not exist,create path: {}", sb.toString());
            try {
                Files.createDirectories(Paths.get(sb.toString()));
            } catch (IOException e) {
                log.error(e.getMessage(), e);
            }
        }

        return sb.append("/")
                .append(chunk.getFilename())
                .append("-")
                .append(chunk.getChunkNumber()).toString();
    }
    /**
     * @description:文件合并
     * @author: 李云江
     * @date: 2020/4/5
     */
    public static void merge(String targetFile, String folder, String filename) {
        try {
            Files.createFile(Paths.get(targetFile));
            Files.list(Paths.get(folder))
                    .filter(path -> !path.getFileName().toString().equals(filename))
                    .sorted((o1, o2) -> {
                        String p1 = o1.getFileName().toString();
                        String p2 = o2.getFileName().toString();
                        int i1 = p1.lastIndexOf("-");
                        int i2 = p2.lastIndexOf("-");
                        return Integer.valueOf(p2.substring(i2)).compareTo(Integer.valueOf(p1.substring(i1)));
                    })
                    .forEach(path -> {
                        try {
                            //以追加的形式写入文件
                            Files.write(Paths.get(targetFile), Files.readAllBytes(path), StandardOpenOption.APPEND);
                            //合并后删除该块
                            Files.delete(path);
                        } catch (IOException e) {
                            log.error(e.getMessage(), e);
                        }
                    });
        } catch (IOException e) {
            log.error(e.getMessage(), e);
        }
    }
}
配置文件application.yml
server:
  port: 8081
  servlet:
    path: /boot
  connection-timeout: 18000000

spring:
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 20MB
  datasource:
    url: jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&useSSL=false
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver
  jpa:
    properties:
      hibernate:
        hbm2ddl:
          auto: create-drop
    show-sql: false

logging:
  level:
    org.boot.uploader.*: debug
#文件保存地址
prop:
  upload-folder: D:/upload

至此服务端基本完成，至于前端的话借鉴github大神的vue-upload直接在上面修改的
####### app.vue

<template>
  <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader"
            @file-complete="fileComplete" @complete="complete"></uploader>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'

  export default {
    data() {
      return {
        options: {
          target: '/boot/uploader/chunk',
          testChunks: true,
          simultaneousUploads: 1,
          chunkSize: 10 * 1024 * 1024
        },
        attrs: {
          accept: 'image/*'
        },
        statusText: {
          success: '成功了',
          error: '出错了',
          uploading: '上传中',
          paused: '暂停中',
          waiting: '等待中'
        }
      }
    },
    methods: {
      // 上传完成
      complete() {
        console.log('complete', arguments)
      },
      // 一个根文件（文件夹）成功上传完成。
      fileComplete() {
        console.log('file complete', arguments)
        const file = arguments[0].file;
        axios.post('/boot/uploader/mergeFile', qs.stringify({
          filename: file.name,
          identifier: arguments[0].uniqueIdentifier,
          totalSize: file.size,
          type: file.type
        })).then(function (response) {
          console.log(response);
        }).catch(function (error) {
          console.log(error);
        });
      }
    },
    mounted() {
      this.$nextTick(() => {
        window.uploader = this.$refs.uploader.uploader
      })
    }
  }
</script>

配置说明：

  1. target 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认值为 ‘/’。
  2. chunkSize 分块时按照该值来分。最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小，默认 110241024。
    testChunks 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认true。
    3.simultaneousUploads 并发上传数，默认3。
跨域问题

这里使用了http-proxy-middleware这个node中间件，可以对前端的请求进行转发，转发到指定的路由。
在index.js中进行配置，如下：

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: '',
    assetsPublicPath: '/',
    proxyTable: {
      '/boot': {
        target: 'http://localhost:8081',
        changeOrigin: true  //如果跨域，则需要�配置此项
      }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

npm install
npm run dev
启动项目就可以了

不掉发的‍
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
springboot+vue前后端分离开发项目源码
11-01
在本项目中，"springboot+vue前后端分离开发项目源码"是一个综合性的Web应用开发实例，它结合了Spring Boot后端框架和Vue.js前端框架，实现了前后端分离的架构设计。这样的设计模式在现代Web开发中非常常见，因为它...
一个基于Vue和springboot+mybatisplus实现的文件云盘管理系统.zip
02-04
文件上传可能涉及大文件分块上传、断点续传等技术，以保证上传的稳定性和效率。 3. 文件预览与分享：系统支持预览常见类型的文件，如文档、图片、音频、视频等。同时，用户可以生成分享链接，将文件共享给其他用户...
vue实现大文件上传下载
Mr_Zang666的博客
08-24 753
" size="small" type="success" @click="submitUpload">上传到服务器选取文件responseType: "blob" // 表明返回服务器返回的数据类型。
vue实现文件下载的2种方式
weixin_52268321的博客
05-02 8393
iframe、a标签下载文件都是调用浏览器默认下载行为iframe闭合标签，会创建包含另个文档的内联框架，通过iframe实现文件（附件）的下载，隐藏iframe，当点击事件触发的时候，动态设置src就能实现文件下载功能。
Vue、Springboot 大文件分片下载、多线程下载
dip_chao的博客
04-30 888
解决大文件上传超时问题，使用Range支持，对文件进行分片下载。
Vue实现大文件分片上传，包括断点续传以及上传进度条
热门推荐
yjxkq99的博客
02-08 1万+
分片上传就是把一个大的文件分成若干块，一块一块的传输。这样做的好处可以减少重新上传的开销。比如：如果我们上传的文件是一个很大的文件，那么上传的时间应该会比较久，再加上网络不稳定各种因素的影响，很容易导致传输中断，用户除了重新上传文件外没有其他的办法，但是我们可以使用分片上传来解决这个问题。通过分片上传技术，如果网络传输中断，我们重新选择文件只需要传剩余的分片。而不需要重传整个文件，大大减少了重传的开销。但是我们要如何选择一个合适的分片呢？
vue的批量下载以及多文件压缩包下载代码示例
Jiang_bug的博客
01-10 1202
vue的批量下载和文件压缩下载
用vue 实现断点续传 (HTTP)
weixin_45525177的博客
11-18 1281
最近遇见一个需要上传超大大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。下面从文件上传方式入手，整理大文件上传的思路，并给出了相关实例代码，由于PHP内置了比较方便的文件拆分和拼接方法，因此服务端代码使用PHP进行示例编
课设毕设基于SpringBoot+Vue的幼儿园管理系统 LW+PPT+源码可运行.zip
最新发布
05-18
这是一个关于课程设计或毕业设计的项目，主要使用了SpringBoot和Vue.js技术栈来构建一个幼儿园管理系统。系统可能包括学生管理、教师管理、课程安排、家长互动等多种功能，旨在提高幼儿园的日常运营效率。项目提供了...
基于Springboot+Vue的个人云盘管理系统的设计源码案例设计.zip
04-20
此外，个人云盘系统还需要考虑性能优化，例如，文件的分块上传和断点续传可以提升大文件上传的效率；使用CDN(Content Delivery Network)服务可以加快静态资源的加载速度，提高用户体验；而合理的缓存策略，如使用...
vue大文件下载（下载进度展示）
天高任鸟飞
06-28 4833
vue大文件下载（下载进度展示） 提示框展示下载进度
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）后端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有需求的可以下载该资源看看。这个是后端的源码。
springboot+vue实现超大文件分片极速上传与下载完整前后端源码
10-15
基于springboot与vue.js开发的前后端分离的超大文件分片上传下载系统，拥有简洁漂亮的界面，实现了G级别文件极速上传下载，断点续传以及秒传功能
springboot整合plupload，实现文件批量上传、断点续传、秒传 源码
02-28
springboot2、plupload2.3.6整合，实现文件批量上传、断点续传、秒传，带进度条，idea、maven工程
一文掌握 Vue3 + Express 大文件分片上传、断点续传、秒传技巧！
CRMEB小程序商城的博客
12-25 2154
在日常开发中，文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上，这在许多场景下都是必需的，比如网盘上传、头像上传等。上传时间比较久；中间一旦出错就需要重新上传；一般服务端会对文件的大小进行限制。这几个问题会导致上传时候的用户体验是很不好的，针对存在的这些问题，我们可以通过分片上传来解决。
vue 批量大文件上传下载
weixin_45525177的博客
12-30 678
大致实现原理：当enctype的值是multipart/form-data时，浏览器会把每个表单项进行分割，分割成不同的部件，以boundary的值为分割标识，这个标识的字符串是随机生成的，最后一个表单项的分割标识字符串末尾会多两个”- -“，代表结束。支持大文件的上传和续传，要求续传支持所有浏览器，包括ie6,ie7,ie8,ie9,Chrome,Firefox,360安全浏览器，并且刷新浏览器后仍然能够续传，重启浏览器（关闭浏览器后再打开）仍然能够继续上传，重启电脑后仍然能够上传。
minio springboot 实现大文件的分片上传、断点续传、秒传的功能
weixin_44359036的博客
08-25 1万+
本文将分享下本人做大文件上传的一些思路，以及相关代码的实现。至于minio的搭建，还是比较简单的。本文就不再赘述。本文搭建的🌰例子也仅仅是把主要流程走通，相关的demo代码可能会有bug。有不同思路的大佬也可以在评区分享下，开拓下思路。其实主要需要实现的就是分片上传。断点续传，秒传仅仅是在分片上传的基础上增加的逻辑扩张。...
断点续传-vue
jokren的博客
09-03 1345
实现断点续传主题思路: 对文件进行每200MB切片,基于spark-md5计算出第一个切片文件的hash值,将文件的名称,大小,hash值传给后台,后台确认当前文件是否上传过,已上传过返回之前上传大小或第几个切片,前端再次上传切片,直到上传完成. 代码: <el-upload class="upload-demo" ref='upload' action="" :http-request='calcMd5' :on-preview="handlePreview" :on-rem
Vue+SpringBoot上传大文件，包括暂停和继续（适用Vue2和Vue3）
weixin_43977534的博客
04-15 4612
Vue+SpringBoot上传大文件，包括暂停和继续，以及进度条process的展示（适用Vue2和Vue3）
springboot+jpa
07-25
Spring Boot JPA 是一种使用Java Persistence API(JPA)进行数据持久化的方式，它可以帮助我们简化数据访问层的开发。JPA 的增删改查操作分别对应如下方法： - 增加：使用 JpaRepository 接口的 save() 方法 - 删除：使用 JpaRepository 接口的 delete() 方法 - 修改：使用 JpaRepository 接口的 save() 方法 - 查询：使用 JpaRepository 接口的 findAll()、findById() 等方法 在使用 JPA 时，需要在项目中引入 spring-data-jpa 包，并在配置文件中配置数据源相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值