SpringBoot实现简单上传功能

最新推荐文章于 2024-02-23 23:09:34 发布

决决怪

最新推荐文章于 2024-02-23 23:09:34 发布

阅读量198

点赞数

分类专栏： java框架学习文章标签： java

本文链接：https://blog.csdn.net/a___b___c/article/details/107971659

版权

java框架学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

# Getting Started
# spring boot 实现简单上传
1、pom.xml文件添加依赖
  <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
   </dependency>
2、yml文件添加配置参数
server:
  port: 8080
  servlet:
    context-path: /demo
spring:
  servlet:
    multipart:
      enabled: true
      location: D:\
      file-size-threshold: 5MB
      max-file-size: 20MB
  mvc:
    view:
      prefix: classpath:/templates/
      suffix: .html
    static-path-pattern: /static/**

3、在templates目录下添加index.html
4、mvc实现页面跳转
    方法一、
    @Controller
    public class IndexController {
        @GetMapping("")
        public String index() {
            return "index";
        }
    }
    方法二、
   @RestController
   public class IndexController {
       @GetMapping("")
       public ModelAndView index() {
           ModelAndView modelAndView = new ModelAndView();
           modelAndView.setViewName("index");
           return modelAndView;
       }
   }
   RestController 相当于 Controller + RequestBody，因此在使用RestController里需要配置视图解析器
  5、代码实现文件上传

具体代码如下：

1、上传功能

@RestController
@RequestMapping("upload")
@Slf4j
public class UploadController {
    @Value("${spring.servlet.multipart.location}")
    private String fileTempPath;

    @PostMapping(value = "/local", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public Dict local(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return Dict.create().set("code", 400).set("message", "文件内容为空");
        }
        String fileName = file.getOriginalFilename();
        String rawFileName = StrUtil.subBefore(fileName, ".", true);
        String fileType = StrUtil.subAfter(fileName, ".", true);
        String localFilePath = StrUtil.appendIfMissing(fileTempPath, "/") + rawFileName + "-" + DateUtil.current(false) + "." + fileType;
        try {
            file.transferTo(new File(localFilePath));
        } catch (IOException e) {
            log.error("【文件上传至本地】失败，绝对路径：{}", localFilePath);
            return Dict.create().set("code", 500).set("message", "文件上传失败");
        }

        log.info("【文件上传至本地】绝对路径：{}", localFilePath);
        return Dict.create().set("code", 200).set("message", "上传成功").set("data", Dict.create().set("fileName", fileName).set("filePath", localFilePath));
    }

}

2、index.html

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>spring-boot-demo-upload</title>
   <!-- import Vue.js -->
   <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
   <!-- import stylesheet -->
   <link href="https://cdn.bootcss.com/iview/3.1.4/styles/iview.css" rel="stylesheet">
   <!-- import iView -->
   <script src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
</head>
<body>
<div id="app">
   <Row :gutter="16" style="background:#eee;padding:10%">
      <i-col span="12">
         <Card style="height: 300px">
            <p slot="title">
               <Icon type="ios-cloud-upload"></Icon>
               本地上传
            </p>
            <div style="text-align: center;">
               <Upload
                     :before-upload="handleLocalUpload"
                     action="/demo/upload/local"
                     ref="localUploadRef"
                     :on-success="handleLocalSuccess"
                     :on-error="handleLocalError"
               >
                  <i-button icon="ios-cloud-upload-outline">选择文件</i-button>
               </Upload>
               <i-button
                     type="primary"
                     @click="localUpload"
                     :loading="local.loadingStatus"
                     :disabled="!local.file">
                  {{ local.loadingStatus ? '本地文件上传中' : '本地上传' }}
               </i-button>
            </div>
            <div>
               <div v-if="local.log.status != 0">状态：{{local.log.message}}</div>
               <div v-if="local.log.status === 200">文件名：{{local.log.fileName}}</div>
               <div v-if="local.log.status === 200">文件路径：{{local.log.filePath}}</div>
            </div>
         </Card>
      </i-col>
   </Row>
</div>
<script>
   new Vue({
      el: '#app',
      data: {
         local: {
            // 选择文件后，将 beforeUpload 返回的 file 保存在这里，后面会用到
            file: null,
            // 标记上传状态
            loadingStatus: false,
            log: {
               status: 0,
               message: "",
               fileName: "",
               filePath: ""
            }
         },
         yun: {
            // 选择文件后，将 beforeUpload 返回的 file 保存在这里，后面会用到
            file: null,
            // 标记上传状态
            loadingStatus: false,
            log: {
               status: 0,
               message: "",
               fileName: "",
               filePath: ""
            }
         }
      },
      methods: {
         // beforeUpload 在返回 false 或 Promise 时，会停止自动上传，这里我们将选择好的文件 file 保存在 data里，并 return false
         handleLocalUpload(file) {
            this.local.file = file;
            return false;
         },
         // 这里是手动上传，通过 $refs 获取到 Upload 实例，然后调用私有方法 .post()，把保存在 data 里的 file 上传。
         // iView 的 Upload 组件在调用 .post() 方法时，就会继续上传了。
         localUpload() {
            this.local.loadingStatus = true;  // 标记上传状态
            this.$refs.localUploadRef.post(this.local.file);
         },
         // 上传成功后，清空 data 里的 file，并修改上传状态
         handleLocalSuccess(response) {
            this.local.file = null;
            this.local.loadingStatus = false;
            if (response.code === 200) {
               this.$Message.success(response.message);
               this.local.log.status = response.code;
               this.local.log.message = response.message;
               this.local.log.fileName = response.data.fileName;
               this.local.log.filePath = response.data.filePath;
               this.$refs.localUploadRef.clearFiles();
            } else {
               this.$Message.error(response.message);
               this.local.log.status = response.code;
               this.local.log.message = response.message;
            }
         },
         // 上传失败后，清空 data 里的 file，并修改上传状态
         handleLocalError() {
            this.local.file = null;
            this.local.loadingStatus = false;
            this.$Message.error('上传失败');
         },
         // beforeUpload 在返回 false 或 Promise 时，会停止自动上传，这里我们将选择好的文件 file 保存在 data里，并 return false
         handleYunUpload(file) {
            this.yun.file = file;
            return false;
         },
         // 这里是手动上传，通过 $refs 获取到 Upload 实例，然后调用私有方法 .post()，把保存在 data 里的 file 上传。
         // iView 的 Upload 组件在调用 .post() 方法时，就会继续上传了。
         yunUpload() {
            this.yun.loadingStatus = true;  // 标记上传状态
            this.$refs.yunUploadRef.post(this.yun.file);
         },
         // 上传成功后，清空 data 里的 file，并修改上传状态
         handleYunSuccess(response) {
            this.yun.file = null;
            this.yun.loadingStatus = false;
            if (response.code === 200) {
               this.$Message.success(response.message);
               this.yun.log.status = response.code;
               this.yun.log.message = response.message;
               this.yun.log.fileName = response.data.fileName;
               this.yun.log.filePath = response.data.filePath;
               this.$refs.yunUploadRef.clearFiles();
            } else {
               this.$Message.error(response.message);
               this.yun.log.status = response.code;
               this.yun.log.message = response.message;
            }
         },
         // 上传失败后，清空 data 里的 file，并修改上传状态
         handleYunError() {
            this.yun.file = null;
            this.yun.loadingStatus = false;
            this.$Message.error('上传失败');
         }
      }
   })
</script>
</body>
</html>

决决怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot实现简单上传功能

# Getting Started# spring boot 实现简单上传1、pom.xml文件添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>2、yml文件添加.
复制链接

扫一扫