实现文件上传简单版

最新推荐文章于 2023-06-19 09:34:57 发布

〖晴天〗

最新推荐文章于 2023-06-19 09:34:57 发布

阅读量383

点赞数

文章标签： java

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

版权

前言

大概流程

--> 前端部分: 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

〖晴天〗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现文件上传简单版

前言大概流程--> 前端部分: vue框架,实现触发动作--> 前端部分: axios框架用于发起post请求并把图片封装成数据--> 后端部分: webserver容器负责接收和处理图片待改进1. 实现文件断点续传2. 大文件分批上传一、页面部分前端部分引入1. Vue框架用于页面实现效果2. Axios框架用于向后端发送post请求<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫