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

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

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

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

3111閲覧

React + Java axiosでfileをアップロードしたい

pokerStars

総合スコア67

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2020/07/01 09:47

編集2020/07/01 13:37

React

1//画像のアップロードと関係ない部分は省いています 2 3//画像ファイルの読み取り 4 handleFileChange = (id, e) => { 5 e.preventDefault(); 6 let reader = new FileReader(); 7 let file = e.target.files[0]; 8 reader.onloadend = () => { 9 this.props.file(id, file);//fileをreader.resultでもダメでした。 10 }; 11 reader.readAsDataURL(file); 12 console.log(file) 13 }; 14 15render() { 16 const product = this.props.products.map(product => { 17 if (product.isVisible === true) { 18 return ( 19 <ul key={product.id}> 20 <li>{product.title}</li> 21 <li>{product.description}</li> 22 <li>{product.price}円</li> 23 24 25 <div> 26 <input type="file" onChange={e => this.handleFileChange(product.id, e)} /> 27 </div> 28 29 30 </ul> 31 ); 32 } 33 }); 34 35 return ( 36 <div> 37 <h1>商品リスト</h1> 38 {product} 39 </div> 40 ); 41 }

React

1 /** 2 * 画像HOST 3 */ 4 image = (id, imagePath, apiToken) => { 5 const REACT_APP_HOST = process.env.REACT_APP_HOST;//http://localhost:8080/ 6 axios.patch( 7 REACT_APP_HOST + 'api/products' + `/${id}` + `/images`, 8 { imagePath: imagePath }, 9 { 10 headers: { 11 Authorization: `Bearer:${apiToken}` 12 }, 13 } 14 ); 15}; 16 17 18 //画像の追加 19 file = async (id, imagePath) => { 20 try { 21 const apiToken = this.state.apiToken; 22 const products = this.state.products.slice(); 23 await this.image(id, imagePath, apiToken); 24 const fileIndex = products.findIndex(product => product.id === id); 25 products[fileIndex] = { ...products[fileIndex], imagePath }; 26 console.log(products); 27 } catch (e) { 28 if (e.response.status === 401) { 29 alert(e.response.data.detail); 30 } else if (e.response.status === 500) { 31 alert(e.response.data.detail); 32 } 33 } 34 };

JAVA

1 /** 2 * 商品画像アップロード 3 * 4 * @param id 商品ID 5 * @param file アップロードファイル 6 * @return 画像を更新した商品情報 7 */ 8 @PatchMapping("{id}/images") 9 @ResponseStatus(HttpStatus.OK) 10 public ProductDto uploadImage( 11 @PathVariable Long id, @RequestParam(name = "imagePath") MultipartFile file) { 12 return productService.uploadImage(id, file); 13 }

イメージ説明
イメージ説明

現状、500のエラーが発生してしまい、うまくmultipartファイルが送れていないように思います。
message: "Current request is not a multipart request"

  • 試してみたこと

axiosのheadersに'Content-Type': 'multipart/form-data',を入れる。
結果
Failed to parse multipart servlet requestとエラーになってしまう。

Content-Typeは自動で設定されるため、headersに書かなくていいという記事を見かけたので書いていないのですが、
書かないとマルチパートリクエストと判断されないエラーになるといったジレンマにハマってしまいました。

分からない部分や追記が欲しい部分はぜひお申し付けください。
ご教授いただきたいです><

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

React

1 //画像ファイルの読み取り 2 handleFileChange = (id, e) => { 3 e.preventDefault(); 4 let data = new FormData(); 5 let file = e.target.files[0]; 6 data.append('imagePath', file); 7 this.props.file(id,data) 8 };

React

1axios.patch( 2 REACT_APP_HOST + 'api/products' + `/${id}` + `/images`,imagePath, 3 { 4 headers: { 5 Authorization: `Bearer:${apiToken}`, 6 }, 7 } 8 );

new FormData()を使って書き換えるとできました。

投稿2020/07/01 14:45

pokerStars

総合スコア67

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問