SpringBootとVue.jsはフロントエンドとバックエンドを分離するファイルアップロード機能を実装

この記事では主にフロントエンドとバックエンド分離のファイルアップロード機能を実現するSpringBoot+Vue.jsを紹介しますので、必要な方は参考にしてください

この記事はVueとSpringBootのある程度の知識が必要な内容に分かれています。 2 つのプロジェクト、1 つはフロントエンドの Vue プロジェクト、もう 1 つはバックエンドの SpringBoot プロジェクトです。

バックエンドプロジェクトの構築

SpringBoot1.5.10+JDK8+IDEAを使用しています。IDEAを使用して新しい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-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: SpringMVC の multipartFile オブジェクト。フロントエンドリクエストによって渡された FormData を受け取るために使用されます。

PostMapping は、HTTP メソッドのマッピングを簡素化するために Spring 4.3 以降に導入された新しいアノテーションです。これは、一般的に使用される @RequestMapping(value = "/xx", method = RequestMethod.POST) と同等です。

現在、バックエンドは次のとおりです。完了、簡単です。

フロントエンドプロジェクトの構築

私はNode8+Webpack3+Vue2を使用しています

ノード環境をローカルにインストールし、Vue-cliをインストールし、Vue-cliを使用してVueプロジェクトを生成する必要があります。

プロジェクトが正常に作成されたら、WebStorm で開くと、簡単なアップロードの例を次のように記述できます。

<template>
 <p 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>
 </p>
</template>
<script>
 import axios from &#39;axios&#39;;
 export default {
 name: &#39;HelloWorld&#39;,
 data() {
  return {
  msg: &#39;Welcome to Your Vue.js App&#39;,
  file: &#39;&#39;
  }
 },
 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(&#39;http://localhost:8082/upload/singlefile&#39;, 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 オブジェクトのカプセル化を使用します 画像データ

Test

サーバーを起動し、BootApplication クラスの main メソッドをポート 8082 で直接実行します

フロントエンドを起動し、ポートのデフォルトは 8080 です。フロントエンド ディレクトリで、それぞれ次のコマンドを実行します。

npm install
npm run dev

起動に成功したら、localhost:8080 にアクセスします

アップロードする画像を選択してください。アップロードが成功すると、画像ファイルがあることがわかります。バックエンドの指定されたディレクトリ

概要

この時点で、フロントエンドとバックエンドを分離したアップロードのデモが完成しました。この記事は、アップロードのみを処理できる単純なデモです。大きなファイルを分割してアップロードする方法については、後ほど SpringBoot+Vue で記事を書きますので、楽しみにしていてください。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vue-cli に基づいて構築されたプロジェクトがバックエンドと対話する方法の紹介

vue.js フロントエンドとバックエンドのデータ対話のためのデータ送信の操作について

以上がSpringBootとVue.jsはフロントエンドとバックエンドを分離するファイルアップロード機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。