SpringBoot+Vue.js реализует разделение загрузки файлов с внешнего и внутреннего интерфейса.

задняя часть внешний интерфейс Командная строка Vue.js
SpringBoot+Vue.js реализует разделение загрузки файлов с внешнего и внутреннего интерфейса.

Оригинальный адрес:luoliangDSGA's blog
адрес блога:luoliangdsga.github.io
Добро пожаловать в перепечатку, пожалуйста, указывайте автора и источник, спасибо!

SpringBoot+Vue.js реализует разделение загрузки файлов с внешнего и внутреннего интерфейса.

Эта статья требует определенных знаний о Vue и SpringBoot.Она разделена на два проекта, один из которых является внешним проектом Vue, а другой является внутренним проектом SpringBoot.

Проект по созданию серверной части

Я использую SpringBoot1.5.10+JDK8+IDEA Используйте IDEA для создания нового проекта SpringBoot, просто нажмите «Далее».

После успешного создания проекта конфигурация pom maven выглядит следующим образом.

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <!--加入web模块-->
        <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>

Затем напишите интерфейс API загрузки

@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: для решения междоменных проблем, так как интерфейс и серверная часть полностью разделены, междоменные проблемы неизбежны. Добавление этой аннотации позволит контроллеру поддерживать междоменные связи. Если эту аннотацию удалить, внешний Ajax-запрос не будет отправлен на серверную часть. Это просто междоменное решение, есть и другие решения, которые не будут рассматриваться в этой статье.
  • MultipartFile: объект multipartFile SpringMVC, который используется для получения FormData из внешних запросов.
  • PostMapping — это новая аннотация, введенная после Spring 4.3 для упрощения отображения методов HTTP, что эквивалентно нашему обычно используемому @RequestMapping (value = "/xx", method = RequestMethod.POST).

Бэнча была сделана до сих пор, очень просто.

Фронтенд проектное строительство

Я использую Node8+Webpack3+Vue2.

Вам необходимо установить среду узла локально, установить Vue-cli и использовать Vue-cli для создания проекта Vue.

После того, как проект будет успешно создан, откройте его с помощью WebStorm, и вы можете написать простой пример загрузки.Основной код выглядит следующим образом:

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

Используйте Axios для отправки запросов Ajax на серверную часть и используйте объект H5 FormData для инкапсуляции данных изображения.

контрольная работа

Запустите сервер и запустите основной метод класса BootApplication напрямую, порт 8082.

Запустите внешний интерфейс, порт по умолчанию 8080, перейдите в каталог внешнего интерфейса и выполните:

  • npm install
  • npm run dev

Доступ к localhost:8080 после успешного запуска

Выберите изображение для загрузки, вы увидите, что после успешной загрузки файлы изображений также находятся в указанном каталоге на задней панели.

Суммировать

На этом отдельная демонстрация загрузки между интерфейсом и сервером завершена.Эта статья представляет собой простую демонстрацию, которая может иметь дело только с загрузкой небольших файлов.Я напишу статью позже.SpringBoot+VueРеализуйте загрузку больших файлов по частям, так что следите за обновлениями. Прикрепите исходный код, приветственная звездочка:boot-upload.

Категории