springboot 获取并保存文件

最新推荐文章于 2025-06-20 17:01:28 发布

孑辞

最新推荐文章于 2025-06-20 17:01:28 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： SpringBoot 文章标签： springboot

本文链接：https://blog.youkuaiyun.com/qq_40448026/article/details/83109785

SpringBoot 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在SpringBoot应用中接收并保存前端异步上传的文件，包括后端处理代码和前端代码示例。提供的示例不仅限于图片，任何大小在1MB以内的文件都适用。项目Demo可通过提供的百度网盘链接下载，提取码为xpq1。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下给出一种springboot获取并保存前端传递的文件的方式：
前端拟采取ajax异步传输FormData，后端拟采取用MultipartFile类型接收并保存。

先附后端代码：

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.FileOutputStream;
import java.io.IOException;

@RestController
public class UpPic {
    @PostMapping("/uppic")
    String uppic(@RequestParam("data") MultipartFile file) {
        //System.out.println("进入后台成功");
        String pathName = "myURL";//想要存储文件的地址
        String pname = file.getOriginalFilename();//获取文件名（包括后缀）
        pathName += pname;
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream(pathName);
            fos.write(file.getBytes()); // 写入文件
            //System.out.println("文件上传成功");
            return "文件上传成功";
        } catch (Exception e) {
            e.printStackTrace();
            return "文件上传失败";
        } finally {
            try {
                fos.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

前端代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script th:src="@{../jquery.js}" ></script>
    <script>
        function sc(){
            var animateimg = $("#f").val(); //获取上传的图片名 带//
            var imgarr=animateimg.split('\\'); //分割
            var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
            var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
            var ext = myimg.substring(houzui, myimg.length).toUpperCase();  //切割 . 获取文件后缀

            var file = $('#f').get(0).files[0]; //获取上传的文件
            var fileSize = file.size;           //获取上传的文件大小
            var maxSize = 1048576;              //最大1MB

                var data = new FormData();
                data.append("data",document.getElementById("f").files[0]);
                $.ajax({
                    url: "/uppic",
                    type: 'POST',
                    data: data,
                    dataType: 'JSON',
                    cache: false,
                    processData: false,
                    contentType: false
                }).done(function(ret){
                    if(ret['isSuccess']){
                        var result = '';
                        var result1 = '';
                        // $("#show").attr('value',+ ret['f'] +);
                        result += '<img src="' + '__ROAD__' + ret['f']  + '" width="100"/>';
                        result1 += '<input value="' + ret['f']  + '" name="user_headimg" style="display:none;"/>';
                        $('#result').html(result);
                        $('#show').html(result1);
                        layer.msg('上传成功');
                    }else{
                        layer.msg('上传失败');
                    }
                });
                return false;

        }
    </script>
</head>
<body>
<form id="form1">
    <label>头像</label>
    <input type="button" value="上传图片" "f.click()" class="btn_mouseout"/><br />
    <p><input type="file" id="f" name="f" "sc(this);" style="display:none"/></p>
</form>
<div id="result"></div>

</body>
</html>

前端代码中写的是“上传图片”，但实际上只要小于1m的文件（不只是图片）都可以传输。

上传文件项目demo下载地址：
链接：https://pan.baidu.com/s/1w2RyK34V7geGMMrQ7X9V4Q
提取码：xpq1