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 画面

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

1.2 送信スクリプト

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

import axios from 'axios';  

export default {
  name: 'FavoPhrase',
  data() {
    return {
      file: '',
      fileName: ''
    }
  },
  methods: {
    handleFileUpload: function(e) {
      this.file = this.$refs.file.files[0];
      if (this.file) {
        this.fileName = this.file.name;
      }
    },
    submitFile: function() {
      let formData = new FormData();
      formData.append('file', this.file);
      formData.append('fileName', this.fileName);
      console.log(formData);
      axios.post(process.env.VUE_APP_API_BASE_URL + "/api/upload-file",
        formData,
        {
          headers: {
            'Content-Type': 'multipart/formdata'
          }
        }
      ).then(function(response){
        alert("Success!\n" + JSON.stringify(response.data));  
      }).catch(function(response){
        alert("Faiure!\n" + response);
      });
    }
  }
}

2.サーバー側

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

	@PostMapping("/api/upload-file")
	public ResponseEntity> uploadFile(
			@RequestHeader(name="Origin", required=false) String origin,
			@RequestParam("file") MultipartFile file,
			@RequestParam("fileName") String fileName) {
		
		HttpHeaders headers = new HttpHeaders();
		headers.add("Access-Control-Allow-Origin", origin);

		if (file != null) {
			Path filePath = FileSystems.getDefault().getPath("c:\\work\\uploaded", fileName);
			try(
				DataInputStream reader = new DataInputStream(file.getInputStream());
				DataOutputStream writer = new DataOutputStream(new FileOutputStream(filePath.toFile()))) {
				
				byte[] buf = new byte[1024];
				int ret = 0;
				while((ret = reader.read(buf)) >= 0) {
					writer.write(buf);
				}
			} catch(Exception e) {
				e.printStackTrace();
			}
		}
		
		Map result = new HashMap<>();
		result.put("message", "file uploaded success.");
		result.put("fileName", fileName);
		
		return new ResponseEntity<>(result, headers, HttpStatus.OK );
	}