質問編集履歴
2
React最小構成
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
ReNextJSのファイルアップロード実装について(APi送信)
|
body
CHANGED
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
|
|
115
115
|
■追記
|
|
116
116
|
|
|
117
|
-
Reactの最小構成で
|
|
117
|
+
Reactの最小構成で試したら、データが更新されました。
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
```js
|
|
@@ -132,18 +132,19 @@
|
|
|
132
132
|
var formData = new FormData()
|
|
133
133
|
formData.append('avatar', avatar)
|
|
134
134
|
|
|
135
|
+
const res = await axios.patch(
|
|
135
|
-
|
|
136
|
+
'http://localhost:8000/api/v1/auth/users/me/',
|
|
136
|
-
method: 'PATCH',
|
|
137
|
-
headers: {
|
|
138
|
-
Authorization: `Token xxxxx`,
|
|
139
|
-
'Content-Type': 'multipart/form-data',
|
|
140
|
-
},
|
|
141
137
|
formData,
|
|
138
|
+
{
|
|
139
|
+
headers: {
|
|
140
|
+
'Content-Type': 'multipart/form-data',
|
|
141
|
+
Authorization: `Token xxx`,
|
|
142
|
-
|
|
142
|
+
},
|
|
143
|
+
}
|
|
144
|
+
)
|
|
143
145
|
|
|
144
|
-
|
|
146
|
+
console.log(res.status)
|
|
145
|
-
|
|
146
|
-
console.log(
|
|
147
|
+
console.log(res.data)
|
|
147
148
|
}
|
|
148
149
|
|
|
149
150
|
return (
|
1
最小構成でも試してみました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -109,4 +109,58 @@
|
|
|
109
109
|
}
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
ぜひともアドバイスをよろしくお願いいたします。
|
|
112
|
+
ぜひともアドバイスをよろしくお願いいたします。
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
■追記
|
|
116
|
+
|
|
117
|
+
Reactの最小構成でも試してみましたが、バックエンドのデータが変更されません。
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
```js
|
|
121
|
+
import { useState } from 'react'
|
|
122
|
+
|
|
123
|
+
function App() {
|
|
124
|
+
const [avatar, setAvatar] = useState(null)
|
|
125
|
+
|
|
126
|
+
const editAvatar = () => {
|
|
127
|
+
const fileInput = document.getElementById('avatarInput')
|
|
128
|
+
fileInput?.click()
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
const sendAbatar = async () => {
|
|
132
|
+
var formData = new FormData()
|
|
133
|
+
formData.append('avatar', avatar)
|
|
134
|
+
|
|
135
|
+
const apiRes = await fetch('http://localhost:8000/api/v1/auth/users/me/', {
|
|
136
|
+
method: 'PATCH',
|
|
137
|
+
headers: {
|
|
138
|
+
Authorization: `Token xxxxx`,
|
|
139
|
+
'Content-Type': 'multipart/form-data',
|
|
140
|
+
},
|
|
141
|
+
formData,
|
|
142
|
+
})
|
|
143
|
+
|
|
144
|
+
const data = await apiRes.json()
|
|
145
|
+
|
|
146
|
+
console.log('api', data)
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
return (
|
|
150
|
+
<>
|
|
151
|
+
<div>Avatar</div>
|
|
152
|
+
<input
|
|
153
|
+
type="file"
|
|
154
|
+
id="avatarInput"
|
|
155
|
+
hidden={true}
|
|
156
|
+
onChange={(e) => setAvatar(e.target.files[0])}
|
|
157
|
+
/>
|
|
158
|
+
<div onClick={editAvatar}>アバターを変更</div>
|
|
159
|
+
<div onClick={sendAbatar}>登録する</div>
|
|
160
|
+
</>
|
|
161
|
+
)
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
export default App
|
|
165
|
+
|
|
166
|
+
```
|