この記事では、VueとSpringbootに関する一定の知識が必要であり、2つのプロジェクトに分かれています。1つはフロントエンドVUEプロジェクトで、もう1つはバックエンドスプリングブートプロジェクトです。
バックエンドプロジェクトの構築
SpringBoot1.5.10+JDK8+アイデアを使用していますアイデアを使用して新しいSpringbootプロジェクトを作成し、次へをクリックします
プロジェクトが正常に作成された後、Maven POM構成は次のとおりです
<dependencies> <dependency> <groupid> org.springframework.boot </groupid> <artifactid> spring-boot-starter </artifactid> </dependency> <！ - webモジュールの追加 - > <依存関係> <Dependency> groupId> org.springframework.boot </groupid> <artifactid> spring-boot-starter-test </artifactid> <scope> test </scope> </dependency> <sependency> <groupid> com.alibaba </groupid> <artifactid> fastjson </依存関係>
次に、アップロードされたAPIインターフェイスを書きます
@retscontroller@requestmapping（ "/upload"）@crossoriginpublic 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（ "coming fileパラメーター：{}"、json.tojsonstring（file、true））; if（objects.isnull（file）|| file.isempty（））{logger.error（ "file is empty"）; 「ファイルは空です。もう一度アップロードしてください」。 } try {byte [] bytes = file.getBytes（）;パスパス= paths.get（upload_folder + file.getoriginalfilename（））; //ファイルフォルダーがない場合、if（！files.iswritable（path））{files.createdirectories（paths.get（upload_folder））;を作成します。 } //ファイルは指定されたパスfiles.write（path、bytes）に書き込みます。 logger.debug（ "ファイルは正常に書き込みます..."）; 「ファイルのアップロードを正常に返信」します。 } catch（ioexception e）{e.printstacktrace（）; 「バックエンド例外...」を返します。 }}}クロスリギンアノテーション：フロントエンドとバックエンドが完全に分離されているため、クロスドメインの問題を解決するため、クロスドメインの問題は避けられません。この注釈を追加すると、コントローラーがクロスドメインをサポートできます。この注釈が削除された場合、フロントエンドのAJAX要求はバックエンドに到達しません。これは単なるクロスドメインソリューションであり、他にもソリューションがあります。この記事では、今のところは説明しません。
MultiPartFile：SpringMVCのMultiPartFileオブジェクト。
ポストマッピングは、春4.3以降に導入された新しい注釈です。これは、一般的に使用される@RequestMapping（value = "/xx"、method = requestmethod.post）に相当するHTTPメソッドのマッピングを簡素化することです。
バックエンドはこれまでに完成しており、非常に簡単です。
フロントエンドプロジェクトの構築
node8+webpack3+vue2を使用しています
ローカルでは、ノード環境をインストールしてVue-Cliをインストールし、Vue-Cliを使用してVueプロジェクトを生成する必要があります。
プロジェクトが正常に作成されたら、WebStormで開くと、簡単なアップロード例を記述できます。メインコードは次のとおりです。
<Template> <div> <h1> {{msg}} </h1> <form> <input type = "file" @change = "getfile（$ event）"> <button @click = "submit（$ event）"> submit </button> </form> </div> </template> <script> axios '; export default {name： 'helloworld'、data（）{return {msg： 'your your.js app'、file： ''}}、method：{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（response）{alert（response.data）; console.log（response）; windocation.location.reload（）;}）.catch（function（error）{alerert（errad "）; windocy.location.reload（）; }}}}} </script>axiosを使用して、ajax要求をバックエンドに送信し、H5のformdataオブジェクトを使用して画像データをカプセル化します
テスト
サーバーを起動して、BootApplicationクラスのメインメソッドを直接実行します、ポート8082
フロントエンドを開始し、ポートはデフォルトで8080、CDはフロントエンドディレクトリになり、個別に実行します。
npm installnpm run dev
スタートアップが成功した後、LocalHost：8080にアクセスしてください
アップロードする画像を選択すると、アップロードが成功した後、バックエンドの指定されたディレクトリに画像ファイルもあることがわかります
要約します
この時点で、フロントエンドとバックエンドを備えた個別のアップロードデモが完了します。この記事は、小さなファイルのアップロードのみを扱うことができる簡単なデモです。その後、Springboot+Vueに関する記事を書き、チャンクに大きなファイルのアップロードを実現しますので、お楽しみに。ソースコードに添付されたStar：Boot-Uploadへようこそ。