spring-boot中实现分片上传文件

水痕012023-11-05 13:04

一、上传文件基本实现

  • 1、前端效果图展示，这里使用element-ui plus来展示样式效果

  • 2、基础代码如下

    vue 复制代码 
    <template>
  <div
    >
    <el-upload
      ref="uploadRef"
      class="upload-demo"
      :limit="1"
      :on-change="handleExceed"
      :auto-upload="false"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button style="margin-left: 30px" type="success" @click="submitUpload"> 上传 </el-button>
    </el-upload>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  import axios from 'axios';

  const fileRef = ref(null);

  const handleExceed = (files) => {
    console.log(files);
    fileRef.value = files;
  };

  const submitUpload = () => {
    console.log('开始上传文件', JSON.stringify(fileRef.value));
    const formData = new FormData();
    formData.append('file', fileRef.value.raw);
    axios.post('http://localhost:9002/file/upload', formData).then((res) => {
      console.log(fileRef.value, '??');
      console.log('上传成功');
    });
  };
</script>

<style lang="scss" scoped></style>

  • 3、定义后端接口，并且处理好跨域(关于跨域处理，自己百度处理)

    java 复制代码 
    package com.course.file.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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;

@RestController
public class UploadController {
    private static final Logger LOG = LoggerFactory.getLogger(UploadController.class);
    @PostMapping("/upload")
    public String uploadApi(@RequestParam MultipartFile file) {
        this.LOG.info("上传文件开始");
        this.LOG.info(file.getOriginalFilename());
        this.LOG.info(String.valueOf(file.getSize()));
        return "上传成功";
    }
}

  • 4、保存文件到本地文件

    java 复制代码 
    package com.course.file.controller;

import com.course.file.utils.UuidUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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 UploadController {
    private static final Logger LOG = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/upload")
    public String uploadApi(@RequestParam MultipartFile file) throws IOException {
        this.LOG.info("上传文件开始");
        this.LOG.info(file.getOriginalFilename());
        this.LOG.info(String.valueOf(file.getSize()));
        // 保存文件到本地
        String fileName = file.getOriginalFilename();
        String key = UuidUtil.getShortUuid();
        // 需要先本地创建一个file文件夹
        String fullPath = "E:/file/" + key + "-" + fileName;
        File dest = new File(fullPath);
        file.transferTo(dest);
        return "上传成功";
    }
}

二、配置静态目录

  • 1、在FileApplication.java旁边添加一个SpringMvcConfig.java的文件

    java 复制代码 
    package com.course.file;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class SpringMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/f/**").addResourceLocations("file:E:/file/");
    }
    // http://localhost:9002/file/f/FdXMQJdF-xx.png
}

  • 2、直接浏览器上直接访问上面的地址

  • 3、上传地址返回给前端

    java 复制代码 
    @RestController
public class UploadController {
    private static final Logger LOG = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/upload")
    public String uploadApi(@RequestParam MultipartFile file) throws IOException {
        this.LOG.info("上传文件开始");
        this.LOG.info(file.getOriginalFilename());
        this.LOG.info(String.valueOf(file.getSize()));
        // 保存文件到本地
        String fileName = file.getOriginalFilename();
        String key = UuidUtil.getShortUuid();
        // 需要先本地创建一个file文件夹
        String fullPath = "E:/file/" + key + "-" + fileName;
        File dest = new File(fullPath);
        file.transferTo(dest);
        return "http://localhost:9002/file/f/" + key + "-" + fileName;
    }
}

  • 4、将上面几个固定的配置写到配置文件中

    properties 复制代码 
    file.path=E:/file/
file.domain=http://localhost:9002/file/
# 修改上传文件大小(不设置大文件可能上传失败)
spring.servlet.multipart.max-file-size=50MB
spring.servlet.multipart.max-request-size=50MB

  • 5、在控制器中使用

    java 复制代码 
    public class UploadController {
    private static final Logger LOG = LoggerFactory.getLogger(UploadController.class);
    @Value("${file.path}")
    private String FILE_PATH;

    @Value("${file.domain}")
    private String FILE_DOMAIN;
}

三、断点续传

  • 1、主要原理

    • 前端将大文件根据文件大小来切割成小片段，使用递归的方式调用后端接口，将文件上传到服务器端
    • 服务器端接收到前端上传片段，存储到服务器上
    • 等前端最后一个上传完成后，将全部的文件合并成一个文件
    • 合并完成后，返回一个url地址，将之前的分片上传的文件删除

  • 2、手动演示前端分段上传

    javascript 复制代码 
    const submitUpload = () => {
    console.log('开始上传文件', JSON.stringify(fileRef.value));
    const formData = new FormData();
    const file = fileRef.value.raw;
    // 文件分配
    let shardSize = 5 * 1024 * 1024; // 以5MB为一个分片
    let shardIndex = 0; // 分片索引
    let start = shardIndex * shardSize; // 开始位置
    let end = Math.min(file.size, start + shardSize); // 结束位置
    let fileShard = file.slice(start, end); // 每次上传的分片数据
    formData.append('file', fileShard);
    axios.post('http://localhost:9002/file/upload', formData).then((res) => {
      console.log(fileRef.value, '??');
      console.log('上传成功');
    });
  };

  • 3、第二次的时候将shardIndex改为1

  • 4、查看本地文件夹下的文件

  • 5、手动创建一个接口来尝试合并文件

    java 复制代码 
    @GetMapping("merge")
    public String merge() throws FileNotFoundException {
        // 最终合成后的视频文件名称
        File newFile = new File(FILE_PATH + "test.mp4");
        FileOutputStream outputStream = new FileOutputStream(newFile, true);
        FileInputStream fileInputStream = null;
        byte[] bytes = new byte[5 * 1024 * 1024];
        int len;
        try {
            // 读取第一段
            fileInputStream = new FileInputStream(new File(FILE_PATH + "/pN0EoOny-blob"));
            while ((len = fileInputStream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, len);
            }
            // 读取第二段
            fileInputStream = new FileInputStream(new File(FILE_PATH + "/f5oeIEDW-blob"));
            while ((len = fileInputStream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, len);
            }
            // 读取第三段
            fileInputStream = new FileInputStream(new File(FILE_PATH + "/qsm8n03q-blob"));
            while ((len = fileInputStream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, len);
            }
        } catch (IOException e) {
            LOG.error("合并分片失败", e);
        } finally {
            try {
                if (fileInputStream != null) {
                    fileInputStream.close();
                }
                outputStream.close();
                LOG.info("IO流关闭");
            } catch (IOException e) {
                LOG.error("IO流关闭", e);
            }
        }
        return "合并视频成功";
    }

四、使用数据库来实现分片上传

  • 1、数据表字段

    在数据库中涉及key只跟文件有关,跟上传多少片没关系的，当已经上传的分片数和分片总数一样的时候就合并文件

    sql 复制代码 
    drop table if exists `file`;
create table `file` (
  `id` int(11) not null PRIMARY key auto_increment comment '主键id',
  `path` varchar(100) not null comment '相对路径',
  `name` varchar(100) comment '文件名',
  `suffix` varchar(10) comment '后缀',
  `size` int(11) comment '大小|字节B',
	`shard_index` int(11) DEFAULT 0 COMMENT '已上传分片',
	`shard_size` int(11) DEFAULT 0 COMMENT '分片大小',
	`shard_total` int(11) DEFAULT 0 COMMENT '分片总数',
	`key` VARCHAR(100) DEFAULT NULL COMMENT '文件标识',
  `created_at` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) COMMENT '创建时间',
  `updated_at` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6) COMMENT '更新时间',
  `deleted_at` timestamp(6) NULL DEFAULT NULL COMMENT '软删除时间'
) engine=innodb default charset=utf8mb4 comment='文件';

  • 2、在pom.xml文件中添加mybatis-plus的依赖包

    xml 复制代码 
    <!--    配置连接到数据库    -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.26</version>
</dependency>
<!--   mybatis plus 依赖包  -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.2.0</version>
</dependency>

<!--    mybatis 代码生成器    -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.2.0</version>
</dependency>

  • 3、application.properties添加配置

    properties 复制代码 
    # mysql数据库链接
spring.datasource.url=jdbc:mysql://localhost:3306/beego?characterEncoding=utf-8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123456

# 配置mybatis-plus
# 开启下划线转驼峰
mybatis-plus.configuration.map-underscore-to-camel-case=true 
mybatis-plus.configuration.auto-mapping-behavior=full
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
# mapping的路径
mybatis-plus.mapper-locations=classpath*:mapper/**/*Mapper.xml
#主键类型  AUTO:"数据库ID自增", INPUT:"用户输入ID", ID_WORKER:"全局唯一ID (数字类型唯一ID)", UUID:"全局唯一ID UUID";
mybatis-plus.global-config.db-config.id-type=AUTO
# 逻辑删除(软删除)
mybatis-plus.global-config.db-config.logic-delete-value=NOW()
mybatis-plus.global-config.db-config.logic-not-delete-value=NULL

  • 4、使用模板生成器生成代码

  • 5、前端使用递归的方式来分片上传文件

    vue 复制代码 
    <script setup>
  import { ref } from 'vue';
  import { genFileId } from 'element-plus';
  import axios from 'axios';
  import md5 from 'js-md5';

  const fileRef = ref(null);

  const handleExceed = (files) => {
    console.log(files);
    fileRef.value = files;
  };

  const updateFile = (shardIndex) => {
    const formData = new FormData();
    const file = fileRef.value.raw;
    // 文件分配
    let shardSize = 5 * 1024 * 1024; // 以5MB为一个分片
    // let shardIndex = 0; // 分片索引
    let start = (shardIndex - 1) * shardSize; // 开始位置
    let end = Math.min(file.size, start + shardSize); // 结束位置
    let fileShard = file.slice(start, end); // 每次上传的分片数据
    // 前端多上传参数
    let size = file.size;
    let shardTotal = Math.ceil(size / shardSize); // 总片数
    const suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
    formData.append('shard', fileShard);
    formData.append('shardIndex', shardIndex);
    formData.append('shardSize', shardSize);
    formData.append('shardTotal', shardTotal);
    formData.append('name', file.name);
    formData.append('size', size);
    formData.append('suffix', suffix); 
    formData.append('key', md5(`${file.name}_${file.size}_${file.type}`));

    axios.post('http://localhost:9002/file/upload1', formData).then((res) => {
      // 判断如果当前的shardIndex < shardTotal的时候递归上传
      if (shardIndex < shardTotal) {
        updateFile(++shardIndex);
      } else {
        console.log('上传成功');
      }
    });
  };
  const submitUpload = () => {
    console.log('开始上传文件', JSON.stringify(fileRef.value));
    // 开始上传文件
    updateFile(1);
  };
</script>

  • 6、后端对文件上传处理，存储到本地和入库操作

    java 复制代码 
    package com.course.file.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.course.file.model.FileEntity;
import com.course.file.service.IFileService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
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 FileController {
    @Autowired
    private IFileService fileService;
    private static final Logger LOG = LoggerFactory.getLogger(FileController.class);
    @Value("${file.path}")
    private String FILE_PATH;

    @Value("${file.domain}")
    private String FILE_DOMAIN;

    @PostMapping("upload1")
    public String upload1(
            @RequestParam MultipartFile shard,
            Integer shardIndex,
            Integer shardSize,
            Integer shardTotal,
            String name,
            String suffix,
            Integer size,
            String key
    ) throws IOException {
        this.LOG.info("开始上传文件");
        System.out.println("当前分片:" + shardIndex);
        System.out.println("当前分片大小:" + shardSize);
        System.out.println("当前分片总数:" + shardTotal);
        System.out.println("文件名称:" + name);
        System.out.println("文件后缀名:" + suffix);
        System.out.println("文件大小:" + size);
        System.out.println("文件唯一的key:" + key);
        // 文件保存到本地目录下
        String localPath = this.FILE_PATH + key + "." + suffix + "." + shardIndex;
        File dest = new File(localPath);
        shard.transferTo(dest);
        LOG.info(dest.getAbsolutePath());
        // 数据入库操作
        LambdaQueryWrapper<FileEntity> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(FileEntity::getFileKey, key);
        FileEntity fileEntity = new FileEntity();
        if (this.fileService.getOne(queryWrapper) != null) {
            // 说明不是第一次上传,需要更新当前上传的分片数量
            fileEntity.setShardIndex(shardIndex);
            if (this.fileService.update(fileEntity, queryWrapper)) {
                return "上传成功";
            } else {
                return "上传失败";
            }
        } else {
            // 第一次上传创建
            String path = this.FILE_PATH + key + "." + suffix;
            fileEntity.setFileKey(key);
            fileEntity.setName(name);
            fileEntity.setPath(path);
            fileEntity.setShardIndex(shardIndex);
            fileEntity.setSuffix(suffix);
            fileEntity.setShardSize(shardSize);
            fileEntity.setShardTotal(shardTotal);
            fileEntity.setSize(size);
            if (this.fileService.save(fileEntity)) {
                return "上传成功";
            } else {
                return "上传失败";
            }
        }
    }
}

  • 7、查看本地目录是否生成分片文件

  • 8、对本地分片文件合并操作，当shardIndex=shardTotal的时候进行合并操作

    java 复制代码 
    @RestController
public class FileController {
    @Autowired
    private IFileService fileService;
    private static final Logger LOG = LoggerFactory.getLogger(FileController.class);
    @Value("${file.path}")
    private String FILE_PATH;

    @Value("${file.domain}")
    private String FILE_DOMAIN;

    @PostMapping("upload1")
    public String upload1(
            @RequestParam MultipartFile shard,
            Integer shardIndex,
            Integer shardSize,
            Integer shardTotal,
            String name,
            String suffix,
            Integer size,
            String key
    ) throws IOException {
        this.LOG.info("开始上传文件");
        System.out.println("当前分片:" + shardIndex);
        System.out.println("当前分片大小:" + shardSize);
        System.out.println("当前分片总数:" + shardTotal);
        System.out.println("文件名称:" + name);
        System.out.println("文件后缀名:" + suffix);
        System.out.println("文件大小:" + size);
        System.out.println("文件唯一的key:" + key);
        // 文件保存到本地目录下
        String localPath = this.FILE_PATH + key + "." + suffix + "." + shardIndex;
        File dest = new File(localPath);
        shard.transferTo(dest);
        LOG.info(dest.getAbsolutePath());
        // 合并文件操作
        if (Objects.equals(shardIndex, shardTotal)) {
            this.merge(key, suffix, shardTotal);
        }

        // 数据入库操作
        LambdaQueryWrapper<FileEntity> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(FileEntity::getFileKey, key);
        FileEntity fileEntity = new FileEntity();
        if (this.fileService.getOne(queryWrapper) != null) {
            // 说明不是第一次上传,需要更新当前上传的分片数量
            fileEntity.setShardIndex(shardIndex);

            if (this.fileService.update(fileEntity, queryWrapper)) {
                return "上传成功";
            } else {
                return "上传失败";
            }
        } else {
            // 第一次上传创建
            String path = this.FILE_PATH + key + "." + suffix;
            fileEntity.setFileKey(key);
            fileEntity.setName(name);
            fileEntity.setPath(path);
            fileEntity.setShardIndex(shardIndex);
            fileEntity.setSuffix(suffix);
            fileEntity.setShardSize(shardSize);
            fileEntity.setShardTotal(shardTotal);
            fileEntity.setSize(size);
            if (this.fileService.save(fileEntity)) {
                return "上传成功";
            } else {
                return "上传失败";
            }
        }
    }
	/**
     * 对上传的文件片段合并操作
     * @param key
     * @param suffix
     * @param shardTotal
     * @throws FileNotFoundException
     */
    private void merge(String key, String suffix, Integer shardTotal) throws FileNotFoundException {
        this.LOG.info("=====开始合并切片操作=====");
        String path = this.FILE_PATH + key + "." + suffix;
        File newFile = new File(path);
        FileOutputStream outputStream = new FileOutputStream(newFile, true);//文件追加写入
        FileInputStream fileInputStream = null;//分片文件
        byte[] byt = new byte[10 * 1024 * 1024];
        int len;
        try {
            for (int i = 0; i < shardTotal; i++) {
                fileInputStream = new FileInputStream(new File(this.FILE_PATH + key + "." + suffix + "." + (i + 1)));
                while ((len = fileInputStream.read(byt)) != -1) {
                    outputStream.write(byt, 0, len);
                }
            }
        } catch (Exception e) {
            this.LOG.error("分片合并异常", e);
        } finally {
            try {
                if (fileInputStream != null) {
                    fileInputStream.close();
                }
                outputStream.close();
                LOG.info("IO流关闭");
            } catch (Exception e) {
                LOG.error("IO流关闭", e);
            }
        }
        this.LOG.info("=====结束合并切片操作=====");
    }
}

  • 9、当合并后可以对之前的分片进行删除操作，避免占用更的磁盘空间

    java 复制代码 
    private void merge(String key, String suffix, Integer shardTotal) throws FileNotFoundException, InterruptedException {
    // ...
    this.LOG.info("=====结束合并切片操作=====");
    System.gc();
    Thread.sleep(1000);

    // 删除分片
    LOG.info("删除分片开始");
    for (int i = 0; i < shardTotal; i++) {
        String filePath = path + "." + (i + 1);
        File file = new File(filePath);
        boolean result = file.delete();
        this.LOG.info("删除{}，{}", filePath, result ? "成功" : "失败");
    }
    LOG.info("删除分片结束");
}

五、前端使用BS64提交数据

  • 1、使用bs64提交后端可以直接定义一个字符串接收数据，将接收到的数据转换为图片

  • 2、前端将上传的文件转换为bs64

    javascript 复制代码 
    // 使用BS64上传
  const bs64UploadHandler = () => {
    const file = fileRef.value.raw;
    let fileReader = new FileReader();
    fileReader.onload = function (e) {
      const base64 = e.target.result;
      console.log('base64', base64);
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
      axios
        .post('http://localhost:9002/file/bs64Upload', {
          fileName: md5(`${file.name}_${file.size}_${file.type}`) + '.' + suffix,
          fileBs64: base64,
        })
        .then((res) => {
          console.log(res);
        });
    };
    fileReader.readAsDataURL(file);
  };

  • 3、后端定义一个方法，将字符串转换为MultipartFile数据类型

    java 复制代码 
    package com.course.file.utils;


import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Decoder;

import java.io.*;

public class Base64ToMultipartFile implements MultipartFile {

    private final byte[] imgContent;
    private final String header;

    public Base64ToMultipartFile(byte[] imgContent, String header) {
        this.imgContent = imgContent;
        this.header = header.split(";")[0];
    }

    @Override
    public String getName() {
        // TODO - implementation depends on your requirements
        return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];
    }

    @Override
    public String getOriginalFilename() {
        // TODO - implementation depends on your requirements
        return System.currentTimeMillis() + (int) Math.random() * 10000 + "." + header.split("/")[1];
    }

    @Override
    public String getContentType() {
        // TODO - implementation depends on your requirements
        return header.split(":")[1];
    }

    @Override
    public boolean isEmpty() {
        return imgContent == null || imgContent.length == 0;
    }

    @Override
    public long getSize() {
        return imgContent.length;
    }

    @Override
    public byte[] getBytes() throws IOException {
        return imgContent;
    }

    @Override
    public InputStream getInputStream() throws IOException {
        return new ByteArrayInputStream(imgContent);
    }

    @Override
    public void transferTo(File dest) throws IOException, IllegalStateException {
        new FileOutputStream(dest).write(imgContent);
    }

    public static MultipartFile base64ToMultipart(String base64) {
        try {
            String[] baseStrs = base64.split(",");

            BASE64Decoder decoder = new BASE64Decoder();
            byte[] b = new byte[0];
            b = decoder.decodeBuffer(baseStrs[1]);

            for(int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }

            return new Base64ToMultipartFile(b, baseStrs[0]);
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
}

  • 4、直接保存文件,这里就不做分片上传

    java 复制代码 
    @PostMapping("bs64Upload")
public String bs64Upload(@RequestBody FileDTO req) throws IOException {
    // 1.将上传的bs64转为图片
    String bs64 = req.getFileBs64();
    MultipartFile shard = Base64ToMultipartFile.base64ToMultipart(bs64);
    // 图片保存到本地
    String localPath = this.FILE_PATH + req.getFileName() ;
    File dest = new File(localPath);
    shard.transferTo(dest);
    LOG.info(dest.getAbsolutePath());
    return this.FILE_DOMAIN + req.getFileName();
}

六、断点续传

  • 1、断点续传主要原谅，前端在点击上传按钮的时候先调用后端一个接口，判断之前是否有上传过记录，如果有就返回之前上传的分片shardIndex，前端就继续以这个分片来上传,如果没有就返回0表示从0开始上传

  • 2、后端定义一个接口根据key来查询数据库是否已经有上传过记录

    java 复制代码 
    @GetMapping("{key}")
public Integer getShardIndexByKeyApi(@PathVariable String key) {
    LambdaQueryWrapper<FileEntity> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(FileEntity::getFileKey, key).select(FileEntity::getShardIndex);
    FileEntity fileEntity = this.fileService.getOne(queryWrapper);
    return fileEntity.getShardIndex();
}

  • 3、前端在使用上传前先调用上面的接口

    javascript 复制代码 
     const submitUpload = () => {
    console.log('开始上传文件', JSON.stringify(fileRef.value));
    const file = fileRef.value.raw;
    const key = md5(`${file.name}_${file.size}_${file.type}`);
    axios.get(`http://localhost:9002/file/${key}`).then((response) => {
      if (response.data > 0) {
        // 历史上传
        updateFile(response.data + 1);
      } else {
        // 首次上传
        updateFile(1);
      }
    });
 };

七、秒传功能

  • 1、当前端使用MD5加密后提交的名字在数据库已经存在,则直接拼接url返回就可以,不需要再次上传

八、上传到阿里OSS

  • 1、配置依赖包

    xml 复制代码 
    <!--    阿里云oss存储    -->
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>

  • 2、封装方法使用

    java 复制代码 
    import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectResult;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.Date;
import java.util.List;
import java.util.UUID;

/**
 * 阿里云上传文件
 */
@Component
public class OssUtil {

    @Value("${aliyun.oss.endpoint}")
    private String endpoint;
    @Value("${aliyun.oss.accessKeyId}")
    private String accessKeyId;
    @Value("${aliyun.oss.accessKeySecret}")
    private String accessKeySecret;
    @Value("${aliyun.oss.bucketName}")
    private String bucketName;

    //文件存储目录(自定义阿里云的)
    private String fileDir = "clouFile/";

    /**
     * 单个文件上传
     *
     * @param file
     * @return
     */
    public String uploadFile(MultipartFile file) {
        // 调用封装好的上传文件方法
        String fileUrl = uploadImg2Oss(file);
        // 返回完整的路径
        String str = getFileUrl(fileUrl);
        return str.trim();
    }

    /**
     * 单个文件上传(指定文件名需要后缀名)
     *
     * @param file
     * @param fileName
     * @return
     */
    public String uploadFile(MultipartFile file, String fileName) {
        try {
            InputStream inputStream = file.getInputStream();
            this.uploadFile2OSS(inputStream, fileName);
            return fileName;
        } catch (Exception e) {
            return "上传失败";
        }
    }

    /**
     * 多个文件的上传，返回路径用,分割
     *
     * @param fileList
     * @return
     */
    public String uploadFile(List<MultipartFile> fileList) {
        String fileUrl = "";
        String str = "";
        String photoUrl = "";
        for (int i = 0; i < fileList.size(); i++) {
            fileUrl = uploadImg2Oss(fileList.get(i));
            str = getFileUrl(fileUrl);
            if (i == 0) {
                photoUrl = str;
            } else {
                photoUrl += "," + str;
            }
        }
        return photoUrl.trim();
    }

    /**
     * 获取完整的路径名
     *
     * @param fileUrl
     * @return
     */
    private String getFileUrl(String fileUrl) {
        if (fileUrl != null && fileUrl.length() > 0) {
            String[] split = fileUrl.split("/");
            String url = this.getUrl(this.fileDir + split[split.length - 1]);
            return url;
        }
        return null;
    }

    /**
     * 获取去掉参数的完整路径
     *
     * @param url
     * @return
     */
    private String getShortUrl(String url) {
        String[] imgUrls = url.split("\\?");
        return imgUrls[0].trim();
    }

    /**
     * 获取url地址
     *
     * @param key
     * @return
     */
    private String getUrl(String key) {
        // 设置URL过期时间为20年  3600l* 1000*24*365*20
        Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 20);
        // 生成URL
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
        if (url != null) {
            return getShortUrl(url.toString());
        }
        return null;
    }

    private String uploadImg2Oss(MultipartFile file) {
        //1、限制最大文件为20M
        if (file.getSize() > 1024 * 1024 * 20) {
            return "图片太大";
        }
        //2、重命名文件
        String fileName = file.getOriginalFilename();
        String suffix = fileName.substring(fileName.lastIndexOf(".")).toLowerCase(); //文件后缀
        String uuid = UUID.randomUUID().toString();
        String name = uuid + suffix;

        try {
            InputStream inputStream = file.getInputStream();
            this.uploadFile2OSS(inputStream, name);
            return name;
        } catch (Exception e) {
            return "上传失败";
        }
    }

    /**
     * 使用阿里云上传文件
     *
     * @param inStream 输入流
     * @param fileName 文件名称
     * @return
     */
    private String uploadFile2OSS(InputStream inStream, String fileName) {
        String ret = "";
        try {
            //创建上传Object的Metadata
            ObjectMetadata objectMetadata = new ObjectMetadata();
            objectMetadata.setContentLength(inStream.available());
            objectMetadata.setCacheControl("no-cache");
            objectMetadata.setHeader("Pragma", "no-cache");
            objectMetadata.setContentType(getContentType(fileName.substring(fileName.lastIndexOf("."))));
            objectMetadata.setContentDisposition("inline;filename=" + fileName);
            //上传文件
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
            PutObjectResult putResult = ossClient.putObject(bucketName, fileDir + fileName, inStream, objectMetadata);
            ret = putResult.getETag();
        } catch (IOException e) {
            System.out.println(e.getMessage());
        } finally {
            try {
                if (inStream != null) {
                    inStream.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return ret;
    }

    /**
     * 获取文件类型
     *
     * @param FilenameExtension
     * @return
     */
    private static String getContentType(String FilenameExtension) {
        if (FilenameExtension.equalsIgnoreCase(".bmp")) {
            return "image/bmp";
        }
        if (FilenameExtension.equalsIgnoreCase(".gif")) {
            return "image/gif";
        }
        if (FilenameExtension.equalsIgnoreCase(".jpeg") ||
                FilenameExtension.equalsIgnoreCase(".jpg") ||
                FilenameExtension.equalsIgnoreCase(".png")) {
            return "image/jpeg";
        }
        if (FilenameExtension.equalsIgnoreCase(".html")) {
            return "text/html";
        }
        if (FilenameExtension.equalsIgnoreCase(".txt")) {
            return "text/plain";
        }
        if (FilenameExtension.equalsIgnoreCase(".vsd")) {
            return "application/vnd.visio";
        }
        if (FilenameExtension.equalsIgnoreCase(".pptx") ||
                FilenameExtension.equalsIgnoreCase(".ppt")) {
            return "application/vnd.ms-powerpoint";
        }
        if (FilenameExtension.equalsIgnoreCase(".docx") ||
                FilenameExtension.equalsIgnoreCase(".doc")) {
            return "application/msword";
        }
        if (FilenameExtension.equalsIgnoreCase(".xml")) {
            return "text/xml";
        }
        //PDF
        if (FilenameExtension.equalsIgnoreCase(".pdf")) {
            return "application/pdf";
        }
        return "image/jpeg";
    }
}
相关推荐
lzzy_lx_208930 分钟前
Spring Boot登录认证实现学习心得：从皮肤信息系统项目中学到的经验
java·spring boot·后端
小七mod41 分钟前
【Spring】Java SPI机制及Spring Boot使用实例
java·spring boot·spring·spi·双亲委派
上上迁2 小时前
分布式接口幂等性的演进和最佳实践，含springBoot 实现（Java版本）
java·spring boot·分布式
paopaokaka_luck2 小时前
基于SpringBoot+Vue的非遗文化传承管理系统（websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大）
java·数据库·vue.js·spring boot·后端·spring·小程序
paopaokaka_luck4 小时前
智能推荐社交分享小程序（websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法）
数据库·vue.js·spring boot·后端·websocket·小程序
柒七爱吃麻辣烫5 小时前
八股文系列-----SpringBoot自动配置的流程
java·spring boot·rpc
头发那是一根不剩了7 小时前
Spring Boot 多数据源切换：AbstractRoutingDataSource
数据库·spring boot·后端
草履虫建模7 小时前
Redis：高性能内存数据库与缓存利器
java·数据库·spring boot·redis·分布式·mysql·缓存
苹果醋37 小时前
Vue3组合式API应用：状态共享与逻辑复用最佳实践
java·运维·spring boot·mysql·nginx
chanalbert8 小时前
从单体到微服务：Spring Cloud 开篇与微服务设计
spring boot·spring·spring cloud
热门推荐
01集群聊天服务器---MySQL数据库的建立02Java学习第十五部分——MyBatis03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---单例模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07《深入设计模式》模式结构汇总08基于odoo17的设计模式详解---装饰模式09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）