实现文件上传简单版

最新推荐文章于 2024-09-18 10:20:32 发布

〖晴天〗

最新推荐文章于 2024-09-18 10:20:32 发布

阅读量408

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qingti_/article/details/123646616

版权

本文档介绍了使用Vue和Axios实现前端文件上传，后端通过SpringBoot接收和处理文件的流程，并提出了文件断点续传和大文件分批上传的优化方案。同时展示了如何在SpringBoot中配置文件上传大小限制和存储位置。

摘要由CSDN通过智能技术生成

前言

大概流程

--> 前端部分: vue框架,实现触发动作

--> 前端部分: axios框架用于发起post请求并把图片封装成数据

--> 后端部分: webserver容器负责接收和处理图片

待改进

1. 实现文件断点续传

2. 大文件分批上传

一、页面部分

前端部分引入

1. Vue框架用于页面实现效果

2. Axios框架用于向后端发送post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>文件上传测试</h1>
<form action="">
  <input type="text" name="intro" placeholder="图片介绍">
  <input type="file" name="picFile">
  <input type="button" value="开始上传" @click="f()">
</form>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el:"form",
        methods:{
            f(){
                //得到form表单数据
                let data = new FormData(document.querySelector("form"));
                axios.post("/upload",data).then(function(response){
                    alert("上传完成")
                })
            }
        }
    })
</script>
</body>
</html>

二、后端部分

后端用SpringBoot框架引入 WebServser框架负责启动项目

package cn.tedu.boot43.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
public class UploadController {
    @RequestMapping("/upload")
    public void upload(String intro, MultipartFile picFile) throws IOException {
        System.out.println("intro = " + intro + ", picFile = " + picFile);
        //得到原始文件名 a.jpg
        String fileName = picFile.getOriginalFilename();
        //得到后缀 .jpg
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //得到唯一的文件名 UUID.randomUUID() 获取唯一标识符
        fileName = UUID.randomUUID() + suffix;
        System.out.println("唯一文件名:"+fileName);
        //准备文件夹路径
        String dirPath = "D:/file";
        File dirFile = new File(dirPath);
        //判断文件夹是否存在 如果不存在 则创建
        if(!dirFile.exists()){
            dirFile.mkdirs();//创建文件
        }
        //得到完整的文件路径
        String filePath = dirPath+"/"+fileName;
        //保存文件到上面指定的路径 异常抛出
        picFile.transferTo(new File(filePath));
    }
}

三、配置SpringBoot

找到 resources --> tatic --> application.properties文件打开

设置以下参数,配置上传文件最大大小和存放位置

#设置文件上传大小 默认为1M
spring.servlet.multipart.max-file-size=10MB
#批量上传文件的总大小
spring.servlet.multipart.max-request-size=100MB
#设置静态资源文件夹 如果添加了其他路径,必须再次设置一下static 否则static则失效
spring.web.resources.static-locations=file:D:/file,classpath:static