Эта статья требует определенного количества знаний о Vue и Springboot, и она разделена на два проекта, один из них-проект Vue Front-End, а другой-проект Back-End Springboot.
Бэк-энд строительство проекта
Я использую Springboot1.5.10+JDK8+Idea Используйте Idea, чтобы создать новый проект Springboot и нажмите Далее
После успешного создания проекта конфигурация Maven POM выглядит следующим образом
<deperiations> <dependency> <groupid> org.springframework.boot </GroupId> <straCactId> Spring-Boot-Starter </artifactid> </depervice> <!-Добавить веб-модуль-> <depertive> <groupd> org.springframework.boot </GroupId> <ArtifactId> spring-boot-starter-web (/artifactid> artifacticid> artifactid> <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")@crossoriginpublic class oploadcontroller {@value ("$ {prop.upload-folder}") частная строка opload_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 ("файл пуст"); вернуть "файл пуст, пожалуйста, загрузите еще раз"; } try {byte [] bytes = file.getBytes (); Path Path = paths.get (upload_folder + file.getoriginalfilename ()); // Если нет папки файлов, создайте if (! Files.iswritembre (path)) {files.createdirectories (paths.get (upload_folder)); } // Файл записывается в указанные файлы path.write (path, bytes); logger.debug ("Файл успешно записывается ..."); вернуть "файл успешно загружается"; } catch (ioException e) {e.printstackTrace (); вернуть "Backend Exception ..."; }}} Аннотация кроссоригена: решить проблемы с перекрестными доменами, потому что передние и задние концы полностью разделены, перекрестные проблемы неизбежны. Добавление этой аннотации позволит контроллеру поддержать междомен. Если эта аннотация будет удалена, запрос AJAX в интерфейсе не достигнет задней части. Это всего лишь междоменное решение, и есть другие решения. Эта статья пока не будет охватывать ее.
Multipartfile: Multiplaartfile объекта Springmvc, используемый для получения формат, передаваемых передовыми запросами.
Пост -картинг - это новая аннотация, представленная после весны 4.3. Он должен упростить отображение методов HTTP, что эквивалентно обычно используемому @Requestmapping (value = "/xx", method = requestMethod.post).
Бэкэнд был завершен до сих пор, он очень просто.
Фронт-эндонд проект строительство
Я использую node8+webpack3+vue2
Локально вам нужно установить среду узла и установить Vue-Cli и использовать Vue-Cli для создания проекта VUE.
После того, как проект будет успешно создан, откройте его с помощью Webstorm, и вы можете написать простой пример загрузки. Основной код заключается в следующем:
<Template> <div> <h1> {{msg}} </h1> <form> <input type = "file" @change = "getFile ($ event)"> <button @click = "Отправить ($ event)"> отправить </button> </form> </div> </timplate> <script> import Axios из Axios '; Экспорт по умолчанию {name: 'helloWorld', data () {return {msg: 'добро пожаловать в ваше приложение vue.js', файл: ''}}, методы: {getFile: function (event) {this.file = event.target.files [0]; console.log (this.file); }, отправить: function (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 (ошибка) {alert (upload.); }); }}}}} </script>Используйте Axios для отправки запросов AJAX в бэкэнд, инкапсулируйте данные изображения, используя объект H5 FormData
тест
Запустите сервер и запустите основной метод класса BootApplication напрямую, порт 8082
Запустите переднюю часть, порт по умолчанию на 8080 и CD на передний каталог и выполните их отдельно:
npm installnpm run dev dev
После успешного стартапа посетите Localhost: 8080
Выберите изображение для загрузки, вы можете увидеть, что после успешной загрузки также есть файлы изображений в указанном каталоге бэкэнд.
Суммировать
На этом этапе отдельная демонстрация загрузки с передней и задней частью завершена. Эта статья представляет собой простую демонстрацию, которая может иметь дело только с загрузкой небольших файлов. Позже я напишу статью о Springboot+Vue, чтобы реализовать загрузку больших файлов в кусках, так что следите за обновлениями. Прикреплено с исходным кодом, добро пожаловать в Star: Boot-Upload.