SpringBoot实现简单文件上传功能

通过 SpringBoot 实现了表单下的文件上传，前后端分离情况下的文件上传。本案例不连接数据库，只做基本的文件上传操作。

在 SpringBoot 中不需要额外导入其他依赖，正常引入即可。

后端 controller 的写法

package com.dailyblue.java.controller;
 
import org.springframework.util.ResourceUtils;
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.RestController;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
 
@RestController
@RequestMapping("/upload")
public class UploadController {
 
    @PostMapping
    public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {
        // file:上传文件
        // 获取到 images 的具体路径
        // String realPath = request.getRealPath("images");
        String realPath = ResourceUtils.getURL("classpath:").getPath() + "/static/images";
        System.out.println("上传的文件地址是：" + realPath);
        // 服务器中对应的位置
        // 产生唯一的文件名称
        String fileName = UUID.getUUid();
        // 获取到文件后缀
        String fileType = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        File src = new File(realPath, fileName + fileType);
        // 将file文件传递到src去
        file.transferTo(src);
        return "images/" + fileName + fileType;
    }
}

这里只做了简单的文件上传，没有限制文件类型。

前端写法

这里分为两种写法，一种是常用的表单提交，另一种是当下较火的 Vue 上传方式。

表单写法

<form action="upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <button>上传</button>
</form>

Vue 写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <img :src="'http://localhost:8081/'+img" v-show="flag"/>
    <input type="file" @change="changeImg"/>
    <button @click="upload">Vue 上传</button>
</div>
</body>
</html>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            file: null,
            img: '',
            flag: false
        },
        methods: {
            changeImg(event) {
                this.file = event.target.files[0];
            },
            upload() {
                // 表单数据
                let data = new FormData();
                data.append('file', this.file);
                // 定义发送格式
                let type = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('http://localhost:8081/upload', data, type)
                    .then((response) => {
                        this.img = response.data;
                        this.flag = true;
                    });
            }
        }
    });
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • springboot 文件上传大小配置的方法

    springboot上传文件大小的配置我这里记录两种,一种是设置在配置文件里只有两行代码,一种是加个Bean 首先第一种: application.properties中添加 spring.http.multipart.maxFileSize=10Mb spring.http.multipart.maxRequestSize=10Mb maxFileSize 是单个文件大小 maxRequestSize是设置总上传的数据大小 这就可以了. 根据自己需求定义吧,Mb和Kb都可以,大小写也都随意,L

  • SpringBoot实现文件上传下载功能小结

    最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 // 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") MultipartFile file) { try { if (

  • SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

  • SpringBoot文件上传控制及Java 获取和判断文件头信息

    SpringBoot文件上传控制及Java 获取和判断文件头信息

    之前在使用SpringBoot进行文件上传时,遇到了很多问题.于是在翻阅了很多的博文之后,总算将上传功能进行了相应的完善,便在这里记录下来,供自己以后查阅. 首先,是建立一个标准的SpringBoot 的工程,这里使用的IDE是Intellij Idea,为了方便配置,将默认的配置文件替换为了application.yml. 1.在index.html中进行文件上传功能,这里使用的文件上传方式是ajax,当然也可以按照自己的具体要求使用传统的表单文件上传. <!DOCTYPE html> &l

  • 详解SpringBoot文件上传下载和多文件上传（图文）

    详解SpringBoot文件上传下载和多文件上传（图文）

    最近在学习SpringBoot,以下是最近学习整理的实现文件上传下载的Java代码: 1.开发环境: IDEA15+ Maven+JDK1.8 2.新建一个maven工程: 3.工程框架 4.pom.xml文件依赖项 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation

  • SpringBoot+layui实现文件上传功能

    什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适). 页面代码(只需要引入基础layui的css与js) <fieldset c

  • springboot实现单文件和多文件上传

    springboot实现单文件和多文件上传

    本文实例为大家分享了springboot实现单文件/多文件上传的具体代码,供大家参考,具体内容如下 package com.heeexy.example.controller; import com.alibaba.fastjson.JSONObject; import com.heeexy.example.util.CommonUtil; import org.springframework.web.bind.annotation.*; import org.springframework.w

  • 详解SpringBoot下文件上传与下载的实现

    SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 / 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") Multipart

  • springboot实现文件上传和下载功能

    spring boot 引入"约定大于配置"的概念,实现自动配置,节约了开发人员的开发成本,并且凭借其微服务架构的方式和较少的配置,一出来就占据大片开发人员的芳心.大部分的配置从开发人员可见变成了相对透明了,要想进一步熟悉还需要关注源码. 1.文件上传(前端页面): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

  • 解决springboot MultipartFile文件上传遇到的问题

    1.ajax传过去的参数在controller接受不到 解决:在contoller中增加@RequestParam 例如:saveUploadFile( @RequestParam("file") MultipartFile file,HttpServletRequest request) 2.org.springframework.web.multipart.support.MissingServletRequestPartException: Required request pa

随机推荐