Spring Boot 实现大文件上传与前端Vue配合教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Hwano/article/details/123642013


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);
        //获取文件原始名 123.jpg
        String filename = picFile.getOriginalFilename();
        //获取文件名后缀
        String suffix = filename.substring(filename.lastIndexOf("."));
        //获取唯一的文件名 UUID.randomUUID()获取唯一标识符
        filename = UUID.randomUUID()+suffix;
        System.out.println("唯一文件名"+filename);
        //准备文件夹路径
        String dirPath = "d:/file";
        File dir= new File(dirPath);
        //判断文件夹是否存在 如果不存在 则创建
        if (!dir.exists()){
            dir.mkdirs();
        }
        //得到完整的文件路径
        String filePath = dirPath+"/"+filename;
        //保存文件到上面指定的路径   异常抛出
        picFile.transferTo(new File(filePath));
    }
}


<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>

当上传文件较大时,在application.properties中添加下面代码:

#设置单个文件上传大小默认为1M

spring.servlet.multipart.max-file-size=10MB

#设置批量上传文件的总大小默认10MB

spring.servlet.multipart.max-request-size=100MB

#设置静态资源文件夹如果添加了其它路径必须再次设置一下static 否则static则失效

spring.web.resources.static-locations=file:D:/file,classpath:static

使用框架

<body>
<div id="app">
<!--:on-success 图片上传完成时调用的方法-->
  <el-upload
          action="/upload"
          name="picFile"
          :on-success="uploadSuccess"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>

</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadSuccess(response,file,filelist){  //上传完调用的方法
        console.log("上传完成:"+response)

      }
    }
  })
</script>