SpringBoot + Vue — Spring Boot + Vue 实现文件上传_spring boot+vue大文件上传

Vue+SpringBoot实现文件上传

最近由于 业务需求，需要实现一个 文件上传 的功能，可以是 图片，也可以是 文档，总之文件类型是随意的。下面我将会演示是一个简化版的文件上传示例。由于这里只需要简单的上传一个文档，因此没有实现 限制文件大小 的代码。

---

前端页面

• 该页面包含 选择文件 以及 输入姓名 两个表单。我并没有选择用 form表单 提交数据，而是直接使用 Vue 的双向数据绑定获取 文件信息 与 输入信息。
• 在提交时，你可能会遇到各种各样的问题，其中包括 跨域问题，跨域问题 的简单解决方案会在 后端代码 中给出。

---

前端代码

<template>
    <div>
      <div class="con">
        <div class="tip">选择文件：</div>
        <input class="file" type="file" title="请选择文件" value="请选择文件">
        <div class="tip">输入姓名：</div>
        <input class="inputS" type="text" v-model="name" placeholder="请在此输入姓名">
        <button class="submit" @click="submit">提交</button>
      </div>
    </div>
</template>

<script>
    import axios from 'axios'

    // var formData = new FormData() // js中声明FormData对象的方法
    var formData = new window.FormData() // vue 中使用此方法创建FromData对象 window.FormData(),否则会报 'FormData isn't definded'
    export default {
      data() {
        return {
          name: '',
          // file: ''
        }
      },
      methods: {
        submit: function() {
          formData.append('file', document.querySelector('input[type=file]').files[0]) // 'file' 这个名字要和后台获取文件的名字一样;
          formData.append('user',this.name)
          //'userfile'是formData这个对象的键名
          axios({
            url: 'https://****:8081/ensure/uploadwork',   //****: 你的ip地址
            data: formData,
            method: 'post',
            headers: {
              'Content-Type': 'multipart/form-data',
              // 'Access-Control-Allow-Origin': 'http://127.0.0.1:8080'
              //这里是为了解决跨域问题，但是博主并没有用这种方式解决。后面会给出解决方案
            }
          }).then((res) => {
            console.log(res.data);
          }) // 发送请求
        },
      }
    }
</script>

<style scoped>
     // css属性由读者自行实现
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

---

后端代码

@CrossOrigin
@RestController
@RequestMapping("/ensure")
public class MyController {
    //上传文件
    @PostMapping("/uploadwork")
    public String uploadWork(HttpServletRequest request,@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {

        request.setCharacterEncoding("UTF-8");
        String user = request.getParameter("user");

        if(!file.isEmpty()) {
            String fileName = file.getOriginalFilename();
            String path = null;
            String type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
            if (type != null) {
                if ("DOCX".equals(type.toUpperCase())||"DOC".equals(type.toUpperCase())) {
                    // 项目在容器中实际发布运行的根路径
                    String realPath = request.getSession().getServletContext().getRealPath("/");
                    // 自定义的文件名称
                    String trueFileName = user + "_" + fileName;

                    // 设置存放图片文件的路径
                    path = "/workplace/classwork/" + trueFileName;
                    File dest = new File(path);
                    //判断文件父目录是否存在
                    if (!dest.getParentFile().exists()) {
                        dest.getParentFile().mkdir();
                    }

                    file.transferTo(dest);

                    return trueFileName;
                }else {
                    return "error";
                }
            }else {
                return "error";
            }
        }else {
            return "error";
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

@CrossOrigin: 为 Spring Boot 的实现类加上此注解即可轻松解决 跨域问题。

---

提交成功

---

------ 感谢观看，一键三连 ------