Google App Engine Java スタンダード+Spring Boot+Vuetify ファイルのアップロードと結果をJSONで返す

GAE Java Std. と Spring Boot と Vue+Vuetify と Xamarin でアプリのテンプレートを構築する。

ここまでにやってきたことは以下。

次に、ファイルのアップロードと受け取り、および、Spring Boot(Spring MVC)側からJSONでのレスポンス返却を試す。

1.ファイルのアップロード Vuetify側

https://serversideup.net/uploading-files-vuejs-axios/

を参考に、ファイルアップロードのサンプルを実装。

1.1 画面

  1. <input @change="handleFileUpload" type="file" id="file" ref="file">
  2. <v-btn @click="submitFile">upload</v-btn>

1.2 送信スクリプト

処理結果で得られたJSONが、すでにJavascriptのオブジェクトに変換された状態のため、表示用にJSONに変換する。

  1. import axios from 'axios';
  2.  
  3. export default {
  4. name: 'FavoPhrase',
  5. data() {
  6. return {
  7. file: '',
  8. fileName: ''
  9. }
  10. },
  11. methods: {
  12. handleFileUpload: function(e) {
  13. this.file = this.$refs.file.files[0];
  14. if (this.file) {
  15. this.fileName = this.file.name;
  16. }
  17. },
  18. submitFile: function() {
  19. let formData = new FormData();
  20. formData.append('file', this.file);
  21. formData.append('fileName', this.fileName);
  22. console.log(formData);
  23. axios.post(process.env.VUE_APP_API_BASE_URL + "/api/upload-file",
  24. formData,
  25. {
  26. headers: {
  27. 'Content-Type': 'multipart/formdata'
  28. }
  29. }
  30. ).then(function(response){
  31. alert("Success!\n" + JSON.stringify(response.data));
  32. }).catch(function(response){
  33. alert("Faiure!\n" + response);
  34. });
  35. }
  36. }
  37. }

2.サーバー側

  • Spring 側で、ファイル自体を MultipartFile、ファイル名を文字列で受け取る
  • ファイルを適当に保存(確認用。GAEにデプロイ時には外す)
  • Map<String,String> を返却する。いい感じにJSONにしてくれる(任意のオブジェクトでも可)
  • Origin仮引数は、開発用のクロスドメイン対応

  1. @PostMapping("/api/upload-file")
  2. public ResponseEntity> uploadFile(
  3. @RequestHeader(name="Origin", required=false) String origin,
  4. @RequestParam("file") MultipartFile file,
  5. @RequestParam("fileName") String fileName) {
  6. HttpHeaders headers = new HttpHeaders();
  7. headers.add("Access-Control-Allow-Origin", origin);
  8. if (file != null) {
  9. Path filePath = FileSystems.getDefault().getPath("c:\\work\\uploaded", fileName);
  10. try(
  11. DataInputStream reader = new DataInputStream(file.getInputStream());
  12. DataOutputStream writer = new DataOutputStream(new FileOutputStream(filePath.toFile()))) {
  13. byte[] buf = new byte[1024];
  14. int ret = 0;
  15. while((ret = reader.read(buf)) >= 0) {
  16. writer.write(buf);
  17. }
  18. } catch(Exception e) {
  19. e.printStackTrace();
  20. }
  21. }
  22. Map result = new HashMap<>();
  23. result.put("message", "file uploaded success.");
  24. result.put("fileName", fileName);
  25. return new ResponseEntity<>(result, headers, HttpStatus.OK );
  26. }

3.確認

実行して、ファイルをアップロード。

処理が成功して、アラートにJSONが表示された。

fileupload_json

springboot_json_fiddler

めでたし。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です