Artikel ini membutuhkan sejumlah pengetahuan tentang Vue dan Springboot, dan dibagi menjadi dua proyek, satu adalah proyek VUE front-end dan yang lainnya adalah proyek springboot back-end.
Konstruksi proyek back-end
Saya menggunakan springboot1.5.10+jdk8+ide menggunakan ide untuk membuat proyek springboot baru dan klik selanjutnya
Setelah proyek dibuat dengan sukses, konfigurasi maven pom adalah sebagai berikut
<Dependencies> <dependency> <GroupId> org.springframework.boot </groupId> <ArTifactId> Spring-boot-starter </arttifactid> </dependency> <!-tambahkan modul web-<cependency> <roupid> org.springframework.boot </groupid> <Ruppendency> <groupid> org. <dependency> <GroupId> org.springframework.boot </groupid> <ArTifactId> tes musim semi-boot-starter </t Artifactid> <scope> </seupope> </dependency> </artacid> </scopeD> <sartifactid> </articid> </groupid> <ArtiFacTid> Fastjson </articid> Versi </groupid> <Arttifactid> fastjson </artrency> </libaba </groupid> <ArTtifacTid> fastjson </articid> Versi </groupid> <ArTtifacTID> fastjson </art fastid </art </dependensi>
Selanjutnya, tulis antarmuka API yang diunggah
@Restcontroller@requestMapping ("/unggah")@crossoriginpublic kelas unggahcontroller {@value ("$ {prop.upload-folder}") string pribadi unggah_folder; private logger logger = loggerFactory.getLogger (unggahcontroller.class); @PostMapping ("/SingleFile") Objek Publik SingleFileUpload (File MultipartFile) {Logger.Debug ("Parameter File yang Masuk: {}", json.toJsonstring (file, true)); if (objects.isnull (file) || file.isempty ()) {logger.error ("file kosong"); kembalikan "File kosong, tolong unggah lagi"; } coba {byte [] bytes = file.getBytes (); Path path = paths.get (unggah_folder + file.getoriginalfileName ()); // Jika tidak ada folder file, buat if (! File.iswritable (path)) {file.createDirectories (paths.get (unggah_folder)); } // File menulis ke file path yang ditentukan.write (path, bytes); logger.debug ("File berhasil menulis ..."); mengembalikan "file unggahan berhasil"; } catch (ioException e) {e.printstacktrace (); kembalikan "Pengecualian Backend ..."; }}} Anotasi crossorigin: Selesaikan masalah lintas domain, karena ujung depan dan belakang sepenuhnya terpisah, masalah domain silang tidak bisa dihindari. Menambahkan anotasi ini akan memungkinkan pengontrol untuk mendukung domain silang. Jika anotasi ini dihapus, permintaan AJAX front-end tidak akan mencapai back-end. Ini hanyalah solusi lintas domain, dan ada solusi lain. Artikel ini tidak akan membahasnya untuk saat ini.
MultipartFile: Objek MultipartFile SpringMVC, digunakan untuk menerima formdata yang diteruskan berdasarkan permintaan front-end.
Postmapping adalah anotasi baru yang diperkenalkan setelah musim semi 4.3. Ini untuk menyederhanakan pemetaan metode HTTP, yang setara dengan @RequestMapping yang biasa digunakan (value = "/xx", metode = requestMethod.post).
Backend telah selesai sejauh ini, sangat sederhana.
Konstruksi proyek front-end
Saya menggunakan Node8+WebPack3+VUE2
Secara lokal, Anda perlu menginstal lingkungan simpul dan menginstal Vue-Cli, dan menggunakan Vue-Cli untuk menghasilkan proyek VUE.
Setelah proyek berhasil dibuat, buka dengan Webstorm dan Anda dapat menulis contoh unggahan sederhana. Kode utamanya adalah sebagai berikut:
<lemplate> <div> <h1> {{msg}} </h1> <sorm> <input type = "file" @ubah = "getFile ($ event)"> <button @click = "Kirim ($ event)"> Kirim </tombol> </form; Ekspor default {name: 'helloWorld', data () {return {msg: 'Selamat datang di aplikasi vue.js Anda', file: ''}}, metode: {getFile: function (event) {this.file = event.target.file [0]; console.log (this.file); }, kirim: function (event) {// cegah elemen dari event perilaku default.preventDefault (); Biarkan formdata = formdata baru (); formdata.append ("file", this.file); AXIOS.POST ('http: // localhost: 8082/unggah/singlefile', formdata) .then (function (response) {alert (response.data); console.log (response); window.location.reload ();}) .catch (function (error) {wingat ("unggah.location.location ();}) .catch (function (function) {warner (" unggah); unggah "). }); }}}}} </script>Gunakan Axios untuk mengirim permintaan AJAX ke backend, merangkum data gambar menggunakan objek FormData H5
tes
Mulai server dan jalankan metode utama kelas bootapplication secara langsung, port 8082
Mulai ujung depan, port default ke 8080, dan CD ke direktori ujung depan, dan menjalankannya secara terpisah:
npm installnpm run dev
Setelah startup yang sukses, kunjungi LocalHost: 8080
Pilih gambar untuk diunggah, Anda dapat melihat bahwa setelah unggahan berhasil, ada juga file gambar di direktori yang ditentukan dari backend
Meringkaskan
Pada titik ini, demo unggahan terpisah dengan ujung depan dan belakang selesai. Artikel ini adalah demo sederhana, yang hanya bisa menangani unggahan file kecil. Kemudian, saya akan menulis artikel di Springboot+Vue untuk mewujudkan unggahan file besar dalam potongan, jadi tetaplah disini. Dilampirkan dengan kode sumber, selamat datang di Star: Boot-Upload.