微人事第四天：单文件上传

最新推荐文章于 2021-11-14 17:40:01 发布

YRZ-James

最新推荐文章于 2021-11-14 17:40:01 发布

阅读量202

点赞数

分类专栏：微人事课程

本文链接：https://blog.csdn.net/qq_41998938/article/details/103988929

版权

微人事课程专栏收录该内容

48 篇文章 11 订阅

订阅专栏

在ssm项目中我们如果要文件上传需要在xml文件中配置很多东西，使用springboot可以帮助我们减少很多配置。
1.首先还是创建springboot工程
引入web
在这里插入图片描述
2.编写提价界面index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="提交">
    </form>
</body>
</html>

3.控制类
由index.html代码中可看到提交表单元素的路径是/upload

package org.javaboy.fileuoload;

import org.springframework.web.bind.annotation.PostMapping;
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;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

@RestController
public class FileUploadController {

    //文件分类
    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd");

    //文件上传
    @PostMapping("/upload")
    public String upload(MultipartFile file, HttpServletRequest request) {
        //日期格式化
        String format = sdf.format(new Date());
        //获取文件路径
        String realPath = request.getServletContext().getRealPath("/img") + format;
        //创建文件夹
        File folder = new File(realPath);
        if (!folder.exists()) {
            folder.mkdirs();
        }
        //获取原来文件的名称
        String oldName = file.getOriginalFilename();
        //设置不重名的新名称
        String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
        //保存文件
        try {
            //保存文件需要文件夹和图片名称
            file.transferTo(new File(folder,newName));
            //返回路径
            String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + format + "/" + newName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
        }
        //保存失败
        return "error";
    }
}

下面来说一下实现的细节：
创建文件保存的路径

String realPath = request.getServletContext().getRealPath("/img") + format;

获取上传文件的名称(带后缀名)

 String oldName = file.getOriginalFilename();

由于保存文件需要保存路径和文件名，又要保证文件名不冲突

String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."))

oldName.substring(oldName.lastIndexOf("."))的作用是将上传文件的后缀名取出，UUID.randomUUID().toString()保证文件名不重叠。

保存路径为folder，文件名是newName

file.transferTo(new File(folder,newName));

保存成功则返回路径

上面说的上传文件只是同步上传方式，也就是说我们每上传一次文件，页面都会刷新一下，接下来我们使用ajax的方式来发送请求。

上面的上传逻辑业务不用改动，只需要改动index.html中的代码就可以了
首先需要引入jquery文件，然后在html中引入jquery文件，使用ajax实现jquery。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div id="result"></div>
    <input type="file" id="file">
<!--    onclick为点击响应事件-->
    <input type="button" value="上传" onclick="uploadFile()">
<script>
    // 点击上传按钮执行以下方法
    function uploadFile() {
        var file = $("#file")[0].files[0];
        //将数据保存到formData中
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            type:'post',
            url:'/upload',
            //这里不需要将上传对象转换为对象
            processData:false,
            contentType:false,
            //formData为上传的文件,作为参数
            data:formData,
            //响应成功后的回调函数
            success:function (msg) {
                console.log(msg);
                //msg是返回的路径
                $('#result').html(msg);
            }
        })
    }
</script>
</body>
</html>

来说一下实现细节：
该方法为点击事件响应，只要一点击上传就会执行这个方法。

function uploadFile()

这句代码中首先将文件转换为jquery对象，然后取出第一个文件

 var file = $("#file")[0].files[0]

formData变量存储上传的文件内容

var formData = new FormData();
formData.append("file",file);

然后开始执行ajax异步请求

 $.ajax({})

formData是作为调用方法的参数

data:formData

msg是方法执行完成功后返回的路径

msg

YRZ-James

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微人事第四天：单文件上传

在ssm项目中我们如果要文件上传需要在xml文件中配置很多东西，使用springboot可以帮助我们减少很多配置。1.首先还是创建springboot工程引入web2.编写提价界面index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫