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

news2024/11/29 10:37:58

一、上传文件基本实现

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

在这里插入图片描述

  • 2、基础代码如下

    <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、定义后端接口,并且处理好跨域(关于跨域处理,自己百度处理)

    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、保存文件到本地文件

    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的文件

    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、上传地址返回给前端

    @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、将上面几个固定的配置写到配置文件中

    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、在控制器中使用

    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、手动演示前端分段上传

    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、手动创建一个接口来尝试合并文件

    @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只跟文件有关,跟上传多少片没关系的,当已经上传的分片数和分片总数一样的时候就合并文件

    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的依赖包

    <!--    配置连接到数据库    -->
    <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添加配置

    # 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、前端使用递归的方式来分片上传文件

    <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、后端对文件上传处理,存储到本地和入库操作

    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的时候进行合并操作

    @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、当合并后可以对之前的分片进行删除操作,避免占用更的磁盘空间

    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

    // 使用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数据类型

    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、直接保存文件,这里就不做分片上传

    @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来查询数据库是否已经有上传过记录

    @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、前端在使用上传前先调用上面的接口

     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、配置依赖包

    <!--    阿里云oss存储    -->
    <dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
        <version>3.10.2</version>
    </dependency>
    
  • 2、封装方法使用

    
    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";
        }
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1172099.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PPT制作指南

诸神缄默不语-个人CSDN博文目录 文章目录 1. SOP2. PPT的目标3. PPT素材4. 内容框架5. 设计细节本文撰写过程中使用到的参考资料 1. SOP 分析目标→收集素材→明确框架→视觉呈现 2. PPT的目标 演讲型PPT&#xff1a;字少图多 阅读型PPT&#xff1a;需要文字解释 分析维度&…

shell学习脚本05(小滴课堂)

可以对海量的数据进行提取。 -v对提取的内容进行取反。 -n显示出行号。 -w精确匹配&#xff1a; -i:忽略大小写&#xff1a; -E正则匹配&#xff1a; cut命令&#xff1a; -d指定分隔符&#xff0c;-f指定截取区域&#xff1a; 截取第一列到第三列&#xff1a; 截取第二列到最…

一文带你了解如何让自动化测试框架更自动化

一、引言 ​对于大厂的同学来说&#xff0c;接口自动化是个老生常谈的话题了&#xff0c;毕竟每年的MTSC大会议题都已经能佐证了&#xff0c;不是大数据测试&#xff0c;就是AI测试等等&#xff08;越来越高大上了&#xff09;。不可否认这些专项的方向是质量智能化发展的方向…

第五章 Python文件操作

系列文章目录 第一章 Python 基础知识 第二章 python 字符串处理 第三章 python 数据类型 第四章 python 运算符与流程控制 第五章 python 文件操作 第六章 python 函数 第七章 python 常用内建函数 第八章 python 类(面向对象编程) 第九章 python 异常处理 第十章 python 自定…

SpringBoot框架使用AOP + 自定义注解实现请求日志记录

一、SpringBoot记录日志 文章目录 一、SpringBoot记录日志1.1、环境搭建1.2、配置FastJson1.3、自定义LogRecord注解1.4、定义日志实体类1.5、创建HttpRequestUtil工具类1.6、定义AOP切面1.7、编写测试类1.8、运行测试 1.1、环境搭建 搭建SpringBoot工程。引入【spring-boot-st…

Docker:Dockerfile语法

Docker&#xff1a;Dockerfile语法 1. 镜像2. 镜像结构3. Dockerfile 1. 镜像 前面我们一直在使用别人准备好的镜像&#xff0c;那如果我要部署一个Java项目&#xff0c;把它打包为一个镜像该怎么做呢&#xff1f; 2. 镜像结构 要想自己构建镜像&#xff0c;必须先了解镜像的…

【漏洞复现】IIS_7.o7.5解析漏洞

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞扫描3、漏洞验证 1.5、修复建议 1.1、漏洞描述 漏洞原理&#xff1a; cgi.fix_path1 1.png/.php该…

送你几款开源IDC资产管理系统

更多运维技术&#xff0c;请关注微信公众号“运维之美” 送你几款开源IDC资产管理系统 1.phpIPAM2.NetBox3.IPPlan4.GestiIP5.RackTables 对于公司机房运维人员来说&#xff0c;你的idc资产管理清单可能还记录在各种excel表格中&#xff0c;当设备和ip变动的时候进行手动更新&a…

Java继承:抽取相同共性,实现代码复用

&#x1f451;专栏内容&#xff1a;Java⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、继承的概念二、继承的语法三、父类成员访问1、子类中访问父类成员变量Ⅰ、子类和父类不存在同名成员变量Ⅱ、子类和父类成员…

泄漏检测与修复(LDAR)过程管控平台(销售出租)VOCs便携式总烃分析仪(销售出租)

LDAR是Leak Detection and Repair&#xff08;泄漏检测与修复&#xff09;的缩写&#xff0c;也是国际上较先进的化工废气检测技术。LDAR主要通过检测化工企业原料输送管道、泵、阀门、法兰等易产生易产生挥发性有机物&#xff08;简称VOCs&#xff09;泄漏的部位&#xff0c;并…

turn.js 模版简单使用

turn.js 不修改添加原功能仅 替换、修改图片格式使用模版 HTML文件 turn.js官网&#xff1a;http://www.turnjs.com/# 第一步 1.点击链接去到官网 2.点击下载按钮 下载左侧示例压缩包 3.解压完成拿到示例文件 turnjs4 4.在samples目录下案例中查看意向使用的模版样式 …

OpenGL_Learn05(纹理)

1. 纹理贴图 wall.jpg (512512) (learnopengl-cn.github.io) 纹理过滤分为&#xff1a;邻近和线性&#xff0c;这跟opencv图像处理一样。 多级渐远纹理 四种采样方式&#xff1a; 代码实现&#xff1a; std_image.h https://github.com/nothings/stb/blob/master/stb_image.…

【数据结构】冒泡排序 (码源实现)

冒泡排序 前言一、冒泡排序运行图例二、算法实现基本思路三、算法实现步骤四、算法码源详解五、冒泡排序效率分析&#xff08;一&#xff09;时间复杂度——O&#xff08;N^2&#xff09;&#xff08;二&#xff09;空间复杂度——O&#xff08;1&#xff09;&#xff08;三&am…

【PC电脑windows-学习样例tusb_serial_device-ESP32的USB模拟串口程序+VScode建立工程+usb组件添加+-基础样例学习】

【PC电脑windows-学习样例tusb_serial_device-ESP32的USB模拟串口程序-基础样例学习】 1、概述2、实验环境3-1、 物品说明3-2、所遇问题&#xff1a;ESP32 cannot open source file "tinyusb.h"或者“tinyusb.h:No such file or directory ....”3-3、解决问题&#…

【多线程】静态代理

当使用静态代理模式时&#xff0c;我们会有一个真实的对象&#xff08;RealSubject&#xff09;&#xff0c;一个代理对象&#xff08;ProxySubject&#xff09;&#xff0c;代理对象将请求转发给真实对象&#xff0c;并可以在请求前后执行额外的操作。 真实对象和代理对象要实…

【LeetCode刷题-队列】--2073.买票需要的时间

2073.买票需要的时间 方法一&#xff1a;使用队列 class Solution {public int timeRequiredToBuy(int[] tickets, int k) {Queue<TicketBuyer> queue new LinkedList<>();for(int i 0;i<tickets.length;i){TicketBuyer buyer new TicketBuyer();buyer.inde…

Linux----------------Shell重定向输入输出

&#xff08;一&#xff09; 标准输入 以键盘读取用户输入的数据&#xff0c;然后再把数据拿到 Shel程序中使用。 标准输出 Shell 程序产生的数据&#xff0c;这些数据一般都是呈现到显示器上供用户浏览查看 输入输出重定向 输入方向就是数据从哪里流向程序。数据默认从键…

【LeetCode刷题-队列与栈】--225.用队列实现栈

225.用队列实现栈 class MyStack {Queue<Integer> queue1;Queue<Integer> queue2;public MyStack() {queue1 new LinkedList<Integer>();queue2 new LinkedList<Integer>();}public void push(int x) {queue2.offer(x);while(!queue1.isEmpty()){que…

SpringBoot + Vue2项目打包部署到服务器后,使用Nginx配置SSL证书,配置访问HTTP协议转HTTPS协议

配置nginx.conf文件&#xff0c;这个文件一般在/etc/nginx/...中&#xff0c;由于每个人的体质不一样&#xff0c;也有可能在别的路径里&#xff0c;自己找找... # 配置工作进程的最大连接数 events {worker_connections 1024; }# 配置HTTP服务 http {# 导入mime.types配置文件…