Vue+SpringBoot实现前后端分离的文件上传

喜欢ヅ旅行 2023-02-20 07:13 20阅读 0赞

## 1.maven的pom配置如下 ##

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.39</version>
        </dependency>
    </dependencies>

## 2.接下来编写上传的API接口 ##

![20200624145941774.png][]

记得这个要配置下哦！~！！！！！

接着是java代码啦

@RestController
    @RequestMapping("/upload")
    @CrossOrigin
    public class UploadController {
        @Value("${prop.upload-folder}")
        private String UPLOAD_FOLDER;
        private Logger logger = LoggerFactory.getLogger(UploadController.class);
    
        @PostMapping("/singlefile")
        public Object singleFileUpload(MultipartFile file) {
            logger.debug("传入的文件参数：{}", JSON.toJSONString(file, true));
            if (Objects.isNull(file) || file.isEmpty()) {
                logger.error("文件为空");
                return "文件为空，请重新上传";
            }
    
            try {
                byte[] bytes = file.getBytes();
                Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename());
                //如果没有files文件夹，则创建
                if (!Files.isWritable(path)) {
                    Files.createDirectories(Paths.get(UPLOAD_FOLDER));
                }
                //文件写入指定路径
                Files.write(path, bytes);
                logger.debug("文件写入成功...");
                return "文件上传成功";
            } catch (IOException e) {
                e.printStackTrace();
                return "后端异常...";
            }
        }
    }

CrossOrigin注解：解决跨域问题，因为前后端完全分离，跨域问题在所难免，加上这个注解会让Controller支持跨域，如果去掉这个注解，前端Ajax请求不会到后端。这只是跨域的一种解决方法，还有其他解决方法这篇文章先不涉及。  
**MultipartFile：SpringMVC的multipartFile对象，用于接收前端请求传入的FormData。**  
**PostMapping是Spring4.3以后引入的新注解，是为了简化HTTP方法的映射，相当于我们常用的@RequestMapping(value = “/xx”, method = RequestMethod.POST).**  
后端至此已经做完了，很简单。

前端vue代码

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <form>
          <input type="file" @change="getFile($event)">
          <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
        </form>
      </div>
    </template>
    
    <script>
      import axios from 'axios';
    
      export default {
        name: 'HelloWorld',
        data() {
          return {
            msg: 'Welcome to Your Vue.js App',
            file: ''
          }
        },
        methods: {
          getFile: function (event) {
            this.file = event.target.files[0];
            console.log(this.file);
          },
          submit: function (event) {
            //阻止元素发生默认的行为
            event.preventDefault();
            let formData = new FormData();
            formData.append("file", this.file);
            axios.post('http://localhost:8082/upload/singlefile', formData)
              .then(function (response) {
                alert(response.data);
                console.log(response);
                window.location.reload();
              })
              .catch(function (error) {
                alert("上传失败");
                console.log(error);
                window.location.reload();
              });
          }
        }
      }
    </script>

[20200624145941774.png]: https://img-blog.csdnimg.cn/20200624145941774.png