質問編集履歴

React最小構成

2021/09/05 09:34

投稿

スコア8

test CHANGED Viewed

	@@ -1 +1 @@
1	- NextJSのファイルアップロード実装について(APi送信)
1	+ ReNextJSのファイルアップロード実装について(APi送信)

test CHANGED Viewed

@@ -230,7 +230,7 @@
-Reactの最小構成でも試してみましたが、バックエンドのデータが変更されません。
+Reactの最小構成で試したら、データが更新されました。
@@ -266,29 +266,31 @@
+    const res = await axios.patch(
-    const apiRes = await fetch('http://localhost:8000/api/v1/auth/users/me/', {
+      'http://localhost:8000/api/v1/auth/users/me/',
-      method: 'PATCH',
-      headers: {
-        Authorization: `Token xxxxx`,
-        'Content-Type': 'multipart/form-data',
-      },
       formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: `Token xxx`,
-    })
+        },
+      }
+    )
-    const data = await apiRes.json()
+    console.log(res.status)
-    console.log('api', data)
+    console.log(res.data)
   }

最小構成でも試してみました。

2021/09/05 09:33

投稿

スコア8

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -221,3 +221,111 @@
 ぜひともアドバイスをよろしくお願いいたします。
+■追記
+Reactの最小構成でも試してみましたが、バックエンドのデータが変更されません。
+```js
+import { useState } from 'react'
+function App() {
+  const [avatar, setAvatar] = useState(null)
+  const editAvatar = () => {
+    const fileInput = document.getElementById('avatarInput')
+    fileInput?.click()
+  }
+  const sendAbatar = async () => {
+    var formData = new FormData()
+    formData.append('avatar', avatar)
+    const apiRes = await fetch('http://localhost:8000/api/v1/auth/users/me/', {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Token xxxxx`,
+        'Content-Type': 'multipart/form-data',
+      },
+      formData,
+    })
+    const data = await apiRes.json()
+    console.log('api', data)
+  }
+  return (
+    <>
+      <div>Avatar</div>
+      <input
+        type="file"
+        id="avatarInput"
+        hidden={true}
+        onChange={(e) => setAvatar(e.target.files[0])}
+      />
+      <div onClick={editAvatar}>アバターを変更</div>
+      <div onClick={sendAbatar}>登録する</div>
+    </>
+  )
+}
+export default App
+```