SpringBoot文件上传（form/ajax/axios）

已于 2022-02-28 17:49:12 修改
阅读量507 收藏 1
点赞数
分类专栏： java js html 文章标签： java javascript spring boot
于 2021-10-28 11:35:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38652288/article/details/121010696
版权
java 同时被 3 个专栏收录
13 篇文章 1 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏

Form文件上传

HTML：

<form id="uploadForm" action="/upload/uploadFileByForm" method="post" enctype="multipart/form-data">
    <input id="file" type="file" name="file" /><br />
    <label for="param1">额外参数1：</label><input id="param1" name="param1" value="value1" type="text"/><br />
    <input type="submit" />
</form>

Js：

// 上传文件
function uploadFile(){
    // 获取表单
    let uploadFormEle = document.getElementById("uploadForm");
    // 提交表单
    uploadFormEle.submit();
}

Java：

/**
 * Form文件上传
 * 
 * @param file   文件
 * @param param1 参数1
 * @return 上传结果
 */
@ResponseBody
@PostMapping("/uploadFileByForm")
public Result<Map<String, String>> uploadFileByForm(@Param("file") MultipartFile file, @Param("param1") String param1) {
    // 检查是否接收到文件
    if(file == null){
        return Result.error("文件上传失败");
    }

    // 获取文件名
    String fileName = file.getOriginalFilename();
    // 获取文件后缀
    String fileSuffix = fileName.substring(fileName.lastIndexOf("."));

    // 待返回数据
    Map<String, String> data = new HashMap<>();
    data.put("fileName", fileName);
    data.put("fileSuffix", fileSuffix);
    data.put("param1", param1);

    // 返回
    return Result.success(data);
}

Ajax文件上传

HTML：

<body>
    <input id="file" type="file" /><br>
    <label for="param1">额外参数1：</label><input id="param1" type="text" value="value1">
    <button onclick="uploadFile()">提交</button>
</body>

<script src="/js/jquery-3.6.0.min.js"></script>

Js：

// url前缀
let urlPrefix = "/upload";

// 通过ajax上传文件
function uploadFile() {
    // 表单数据
    var formData = new FormData();
    formData.append("file", $("#file")[0].files[0]);
    formData.append("param1",  $("#param1").val());

    // ajax请求
    $.ajax({
        type: "POST",
        url: urlPrefix + "/uploadFileByAjax",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(data);
        },
        error: function (e) {
            alert("未知错误");
        }
    });
}

Java：

/**
 * Ajax文件上传
 * 
 * @param file   文件
 * @param param1 参数1
 * @return 上传结果
 */
@ResponseBody
@PostMapping("/uploadFileByAjax")
public Result<Map<String, String>> uploadFileByAjax(@RequestParam("file") MultipartFile file,
        @RequestParam("param1") String param1) {
    // 检查是否接收到文件
    if (file == null) {
        return Result.error("文件上传失败");
    }

    // 获取文件名
    String fileName = file.getOriginalFilename();
    // 获取文件后缀
    String fileSuffix = fileName.substring(fileName.lastIndexOf("."));

    // 待返回数据
    Map<String, String> data = new HashMap<>();
    data.put("fileName", fileName);
    data.put("fileSuffix", fileSuffix);
    data.put("param1", param1);

    // 返回
    return Result.success(data);
}

Axios文件上传

HTML：

<body>
	<input id="file" type="file" /><br>
	<label for="param1">额外参数1：</label><input id="param1" type="text" value="value1"><br/>
	<button onclick="uploadFile()">提交</button>
</body>

<!-- 直接使用axios.min.js上传文件，请先用多行注释/**/注释掉axios.min.js最后一行内容 -->
<script src="/js/axios.min.js"></script>

Js：

// url前缀
let urlPrefix = "/upload";

// 通过ajax上传文件
function uploadFile() {
    // url前缀
    let urlPrefix = "/upload";

    // 上传文件
    function uploadFile() {
        // 表单数据
        let data = new FormData();
        data.append("file", document.getElementById("file").files[0]);
        data.append("param1", document.getElementById("param1").value);

        // axios请求
        axios.post(
            urlPrefix + "/uploadFileByAxios",
            data, 
            {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            },
        )
        .then(res => {
            let result = res.data;
            console.log(result);
        })
        .catch(err => {
            console.log(err);
        })
    }
}

Java：

/**
 * Axios文件上传
 * 
 * @param file   文件
 * @param param1 参数1
 * @return 上传结果
 */
@ResponseBody
@PostMapping("/uploadFileByAxios")
public Result<Map<String, String>> uploadFileByAxios(@RequestParam("file") MultipartFile file,
        @RequestParam("param1") String param1) {
    // 检查是否接收到文件
    if (file == null) {
        return Result.error("文件上传失败");
    }

    // 获取文件名
    String fileName = file.getOriginalFilename();
    // 获取文件后缀
    String fileSuffix = fileName.substring(fileName.lastIndexOf("."));

    // 待返回数据
    Map<String, String> data = new HashMap<>();
    data.put("fileName", fileName);
    data.put("fileSuffix", fileSuffix);
    data.put("param1", param1);

    // 返回
    return Result.success(data);
}

UploadController.java

package replace.your.package;

import java.util.HashMap;
import java.util.Map;

import org.apache.ibatis.annotations.Param;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * 文件上传控制器
 */
@RestController
@RequestMapping("/upload")
public class UploadController {

    /**
     * Form文件上传
     * 
     * @param file   文件
     * @param param1 参数1
     * @return 上传结果
     */
    @ResponseBody
    @PostMapping("/uploadFileByForm")
    public Result<Map<String, String>> uploadFileByForm(@Param("file") MultipartFile file, @Param("param1") String param1) {
        // 检查是否接收到文件
        if(file == null){
            return Result.error("文件上传失败");
        }

        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 获取文件后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."));

        // 待返回数据
        Map<String, String> data = new HashMap<>();
        data.put("fileName", fileName);
        data.put("fileSuffix", fileSuffix);
        data.put("param1", param1);

        // 返回
        return Result.success(data);
    }

    /**
     * Ajax文件上传
     * 
     * @param file   文件
     * @param param1 参数1
     * @return 上传结果
     */
    @ResponseBody
    @PostMapping("/uploadFileByAjax")
    public Result<Map<String, String>> uploadFileByAjax(@RequestParam("file") MultipartFile file,
            @RequestParam("param1") String param1) {
        // 检查是否接收到文件
        if (file == null) {
            return Result.error("文件上传失败");
        }

        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 获取文件后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."));

        // 待返回数据
        Map<String, String> data = new HashMap<>();
        data.put("fileName", fileName);
        data.put("fileSuffix", fileSuffix);
        data.put("param1", param1);

        // 返回
        return Result.success(data);
    }

    /**
     * Axios文件上传
     * 
     * @param file   文件
     * @param param1 参数1
     * @return 上传结果
     */
    @ResponseBody
    @PostMapping("/uploadFileByAxios")
    public Result<Map<String, String>> uploadFileByAxios(@RequestParam("file") MultipartFile file,
            @RequestParam("param1") String param1) {
        // 检查是否接收到文件
        if (file == null) {
            return Result.error("文件上传失败");
        }

        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 获取文件后缀
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."));

        // 待返回数据
        Map<String, String> data = new HashMap<>();
        data.put("fileName", fileName);
        data.put("fileSuffix", fileSuffix);
        data.put("param1", param1);

        // 返回
        return Result.success(data);
    }
}

Result.java

package replace.your.package;

import java.util.Date;

/**
 * 响应结果
 */
public class Result<D> {
    // 结果代码
    private Integer code;
    // 返回消息
    private String message;
    // 返回数据
    private D data;
    // 返回时间
    private Date time;

    // 构造方法
    public Result(){
        this(0, "ok", null);
    }

    public Result(D data){
        this(0, "ok", data);
    }

    public Result(Integer code, String message){
        this(code, message, null);
    }

    public Result(Integer code, String message, D data){
        this.code = code;
        this.message = message;
        this.data = data;
        this.time = new Date();
    }

    // 静态方法
    public static <D> Result<D> success(){
        return new Result<D>();
    }

    public static <D> Result<D> success(D data){
        return new Result<D>(data);
    }
    
    public static <D> Result<D> error(){
        return new Result<D>(-1, "error");
    }

    public static <D> Result<D> error(String message){
        return new Result<D>(-1, message);
    }

    public static <D> Result<D> error(Integer code, String message){
        return new Result<D>(code, message, null);
    }

    public static <D> Result<D> error(Integer code, String message, D data){
        return new Result<D>(code, message, data);
    }

    /**
     * Get/Set
     */
    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public D getData() {
        return data;
    }

    public void setData(D data) {
        this.data = data;
    }

    // ToString
    @Override
    public String toString() {
        return "Result: {" + 
            "\"code\": \"" + this.code + "\", " + 
            "\"message\": \"" + this.message +  "\", " + 
            "\"time\": \"" + this.time + "\", " + 
            "\"data\": \"" + this.data + "\"" + 
            "}";
    }
}
阴雨霉湿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带进度条文件上传springboot+vue+axios+mint-ui
07-27
springboot开发服务后台，提供文件上传接口，vue.js搭建前端项目，mint-ui做为UI界面，axios与后端服务接口交互，axios可实时监控文件上传进度，通过mint-ui实时展示当前文件上传进度
axios+springboot 文件上传
u010096624的博客
10-26 379
思路： 客户端通过表单方式上传 服务端使用 @RequestParam 接收 注意事项： 服务端接收所有表单数据时，只能使用 @RequestParam ，不能使用@RequestBody 前端要把文件 代码： @PutMapping(path = "/app/questions/{id}") @Transactional public void update(@PathVariable Long id, @RequestPara
springboot+vue 前后端分离使用axios上传文件
qq_46060404的博客
01-19 953
springboot+vue前后端分离进行文件上传。
SpringBoot文件上传（Ajax）
qq_36336898的博客
06-22 477
1.准备前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fileup</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body>
spring boot + axios 上传文件
le185186826的博客
04-20 1632
背景 纯新手记录一下springboot 上传文件。（以前是做.net 的） 后端实现 FileUtil 用来保存文件创建文件夹。 public static void save (byte[] file,String filePath, String fileName) throws Exception{ File targetFile = ne...
Error：in ./node-modules/axios/lib/platform/index.js
最新发布
12-22
Error：in ./node-modules/axios/lib/platform/index.js
vue项目中使用axios上传图片等文件操作
10-19
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作，需要的朋友参考下吧
springboot+vue实现文件上传下载
01-18
本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下 一、文件上传（基于axios的简单上传） 所使用的技术：axios、springboot、vue; 实现思路：通过h5 ：input元素标签进行...
Axios.js源码文件
05-09
axios是简化ajax开发的异步框架，大大提升开发效率。
关于使用axios上传文件springboot接收问题
coderping的博客
08-15 1597
1.关于Content-type application/x-www-form-urlencoded：数据格式为"key1=value1&key2=value2" multipart/form-data：用于传输文件 application/json：数据格式为json格式，有的服务器语言不支持（比如PHP，需要从php://input里获得原始输入流，再json_decode成对象...
Axios + Spring Boot 实现文件上传和下载
Common_Six的博客
05-31 709
1.所用技术 前端：Vue + Axios 后端：Springboot + SpringMVC 2.单文件上传 后端代码 只需要使用MultipartFile类配合RequestBody注解即可 @PostMapping("your/path") public ResultData courseCoverUpload(@RequestBody MultipartFile file){ /** your service */ } 前端代码 Axios上传需要设置头部，使用FormDa
Ajax在springboot项目中的使用
小小苏的小小苏
12-24 3097
Ajax简介 Ajax是一种web应用技术，可以借助客户端脚本（javascript）与服务端应用进行异步通讯，获取服务端数据以后，可以进行局部刷新，进而提高数据的响应和渲染速度。所有的Ajax请求都会基于DOM（HTML元素）事件，通过XHR（XMLHttpRequest）对象实现与服务端异步 通讯局部更新。 Ajax在 ...
springboot项目中利用ajaxfileupload进行图片上传
Irving_Ma的博客
04-02 1470
引入html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta content="width=device-width, initial-scale=1.0,...
SpringBoot使用ajax快速将form表单提交给后台
weixin_45599294的博客
10-10 3210
方式一 使用jquery方法和spring的参数绑定 方式二 传递json格式数据，后台接收 方式三 使用jquery的formdata方式获取form内容
springboot ajax form json 请求方式
qq_42671259的博客
03-25 298
https://blog.csdn.net/tengdazhang770960436/article/details/83010505
SpringBoot vue+axios文件上传与下载
Joker_DJ
09-09 328
上传 上传代码： 采用iview组件上传 <Upload :action="uploadApi" multiple :headers="jwt" :data="uploadData" :on-success="uploadsuccess" :on-error="uploadFaild" :on-progress="uplo
ajax提交spring form表单提交表单提交,SpringBoot+Ajax文件上传+FormData表单提交
weixin_36358217的博客
08-05 528
需求前端：html定义好form表单的输入信息(text+file)标签js通过Ajax异步提交表单中的内容。后端：通过接口接收表单中的数据(String+MultipartFile)实现HTML部分 ：html定义好form表单的输入信息(text+file)标签//定义好id，ajax会用到//单选项 (解释：name要与接口的参数名对应起来，value是对应值) 一号位 二号位 二号位//文...
使用ajax+Springboot实现文件上传
weixin_44337267的博客
04-24 2658
后端部分： @PostMapping("/fileUpload") public Map<String,Object> getFile(@RequestPart("file") MultipartFile file) throws IOException { if(!file.isEmpty()) { // 获取文件名 System.out.println(file.getName());
vue springboot上传文件及回显
04-25
一般来说，vue可以使用axios或者fetch等ajax库发送文件请求，而springboot则可以使用Spring MVC的方式来处理上传文件请求。 上传文件的核心是FormData对象，可以使用它来构造包含文件数据的请求体。在vue中，我们...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值