質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

axios → SpringBoot でMultiPartFileが受け取れない

MikenekoSamane
MikenekoSamane

総合スコア102

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

225閲覧

投稿2022/09/25 04:55

前提

React TypeScript の axiosで、SpringBootにMultiPartFileをPostしたのち、
Springのローカルに保存したいのですが、
そもそもファイルが受け取れません。

今回は .png .jpg のいずれかの送信を想定しています。

発生している問題・エラーメッセージ

org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present

該当のソースコード

tsx

import axios from "axios"; const PostImage = function () { function onclick() { const file: any = document.getElementById('file'); console.log(file.files[0]) const formData = new FormData() formData.append('file', file) const headers = { "content-type": "multipart/form-data" }; axios.post('/postimage', formData, { headers })//FormDataパターン axios.post('/postimage', { file: file }, { headers })//辞書パターン } return ( <> <input type="file" id="file" /> <button onClick={onclick}>post</button> </> ) }; export default PostImage;

java

@PostMapping("/postimage") public void postimage( @RequestPart("file") MultipartFile file // @RequestParam("file") MultipartFile file ) { System.out.println(file.getName()); }

試したこと

以上のFormDataでPost、辞書でPost、
@RequestPartで受け取り、@RequestParamで受け取り
いずれの組み合わせでも同じ 'file' is not present で怒られます

補足情報(FW/ツールのバージョンなど)

json

"version": "0.1.0" "dependencies": { "axios": "^0.27.2", ... }

xml

<modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.3</version>

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。