SpringBoot+Vue.js实现前后端分离的文件上传功能

以下是"SpringBoot+Vue.js实现前后端分离的文件上传功能"的完整攻略：

1. 前置条件

• 已安装好Java开发环境和Maven构建工具
• 已创建好一个基于SpringBoot的Web项目
• 已安装好Vue.js前端框架

2. 实现后端文件上传功能

2.1. 添加Multipart依赖

在项目的pom.xml文件中添加Multipart依赖：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

<dependency>
  <groupId>org.apache.tomcat.embed</groupId>
  <artifactId>tomcat-embed-core</artifactId>
  <scope>provided</scope>
</dependency>

<dependency>
  <groupId>org.apache.tomcat.embed</groupId>
  <artifactId>tomcat-embed-el</artifactId>
  <scope>provided</scope>
</dependency>

<dependency>
  <groupId>org.apache.tomcat.embed</groupId>
  <artifactId>tomcat-embed-websocket</artifactId>
  <scope>provided</scope>
</dependency>

2.2. 添加文件上传API

在项目的Controller中添加文件上传API：

@RestController
@RequestMapping("/api")
public class FileController {
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String upload(MultipartFile file) {
        // 文件上传逻辑
        return "文件上传成功!";
    }
}

2.3. 启用Multipart配置

在启动类中开启Multipart配置：

@SpringBootApplication
public class Application extends SpringBootServletInitializer {
    @Bean
    public MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        // 单个文件最大容量
        factory.setMaxFileSize(DataSize.ofMegabytes(10));
        // 总共最大容量
        factory.setMaxRequestSize(DataSize.ofMegabytes(50));
        return factory.createMultipartConfig();
    }

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

3. 实现前端文件上传功能

3.1. 新建上传组件

在Vue.js项目的src/components目录下新建Upload.vue文件，添加如下代码：

<template>
  <div class="upload">
    <input type="file" ref="fileInput" @change="changeHandler" />
  </div>
</template>

<script>
export default {
  name: "Upload",
  data() {
    return {
      file: null,
    };
  },
  methods: {
    changeHandler(event) {
      this.file = event.target.files[0];
      this.upload();
    },
    upload() {
      let formData = new FormData();
      formData.append("file", this.file);
      fetch("/api/upload", {
        method: "POST",
        body: formData,
      })
        .then((response) => {
          console.log(response.text());
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
.upload {
  cursor: pointer;
}
</style>

3.2. 在页面中使用上传组件

在需要使用上传功能的页面中，引入Upload组件并在模板中使用：

<template>
  <div>
    <Upload />
  </div>
</template>

<script>
import Upload from "@/components/Upload.vue";

export default {
  name: "Home",
  components: {
    Upload,
  },
};
</script>

<style scoped></style>

至此，就可以实现前后端分离的文件上传功能了。

示例1：后端单个文件上传

@RestController
@RequestMapping("/api")
public class FileController {
    private static final String UPLOAD_PATH = "/Users/username/upload/";

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String upload(MultipartFile file) {
        if (!file.isEmpty()) {
            String fileName = file.getOriginalFilename();
            try {
                byte[] bytes = file.getBytes();
                Path path = Paths.get(UPLOAD_PATH + fileName);
                Files.write(path, bytes);
                return "File " + fileName + " uploaded successfully!";
            } catch (IOException e) {
                return "Fail to upload " + fileName;
            }
        } else {
            return "File is empty!";
        }
    }
}

示例2：前端多文件上传

<template>
  <div>
    <Upload @fileSelected="selectHandler"></Upload>
    <br>
    <div v-for="(item, index) in fileList" :key="index">
      <img :src="item.url" width="100"/>
    </div>
  </div>
</template>

<script>
import Upload from "@/components/Upload.vue";

export default {
  name: "Home",
  components: {
    Upload,
  },
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    selectHandler(files) {
      for (let i = 0; i < files.length; i++) {
        this.fileList.push({
          url: URL.createObjectURL(files[i]),
        });
      }
    }
  },
};
</script>

<style scoped></style>

希望这些说明能够对您有所帮助！