teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jsonを使ったファイルの送受信について

編集履歴

質問編集履歴

4

ほげ

2020/11/17 01:51

投稿

_ecs
_ecs

スコア9

test CHANGED
File without changes
test CHANGED
@@ -46,11 +46,121 @@
46
46
 
47
47
  ```
48
48
 
49
- 追記
49
+ 追記:全体のコード
50
50
 
51
51
  ```javascript
52
52
 
53
+ // cookie取得
54
+
55
+ const get_cookie = name => {
56
+
57
+ let cookieValue = null;
58
+
59
+ if (document.cookie && document.cookie !== '') {
60
+
61
+ const cookies = document.cookie.split(';');
62
+
63
+ for (var i = 0; i < cookies.length; i++) {
64
+
65
+ let cookie = jQuery.trim(cookies[i]);
66
+
67
+ if (cookie.substring(0, name.length+1) === (name+'=')) {
68
+
69
+ cookieValue = decodeURIComponent(cookie.substring(name.length+1));
70
+
71
+ break;
72
+
73
+ }
74
+
75
+ }
76
+
77
+ }
78
+
79
+ return cookieValue;
80
+
81
+ }
82
+
83
+
84
+
85
+ class Transmission {
86
+
87
+ constructor(method, content, func) {
88
+
89
+ this.method = method;
90
+
91
+ this.content = content;
92
+
93
+ this.func = func;
94
+
95
+ this.__proto__.csrftoken = get_cookie('csrftoken');
96
+
97
+ }
98
+
99
+
100
+
101
+ send(url) {
102
+
103
+ fetch(url, {
104
+
105
+ method: this.method,
106
+
107
+ credentials: "same-origin",
108
+
109
+ headers: {
110
+
111
+ "Accept": "application/json",
112
+
113
+ "Content-Type": "application/json",
114
+
115
+ "X-CSRFToken": this.csrftoken,
116
+
117
+ },
118
+
119
+ body: JSON.stringify(this.content)
120
+
121
+ })
122
+
123
+ .then(response => {
124
+
125
+ if(response.ok) {
126
+
127
+ return response.json();
128
+
129
+ } else {
130
+
131
+ throw new Error("not found...");
132
+
133
+ }
134
+
135
+ })
136
+
137
+ .then(data => {
138
+
139
+ // thisの束縛
140
+
141
+ this.func(data);
142
+
143
+ })
144
+
145
+ .catch(e => {
146
+
147
+ console.log(e.message);
148
+
149
+ });
150
+
151
+ }
152
+
153
+ }
154
+
155
+ Transmission.uid = get_cookie('uid');
156
+
157
+
158
+
159
+
160
+
161
+ {
162
+
53
- let file_name = file_content = null;
163
+ let file_name = file_content = null;
54
164
 
55
165
  // ファイル中身を展開しbase64エンコード
56
166
 
@@ -80,6 +190,104 @@
80
190
 
81
191
  });
82
192
 
193
+
194
+
195
+ // document.getElementById("send").addEventListener("click", e => {
196
+
197
+ // const cmd = document.getElementById("cmd");
198
+
199
+ // if(cmd.value != "") {
200
+
201
+ // let content = {
202
+
203
+ // sender: Transmission.uid,
204
+
205
+ // cmd: cmd.value,
206
+
207
+ // recipient: "00-FF-CE-89-86-5B"
208
+
209
+ // }
210
+
211
+ // if(file_name != null && file_content != null) {
212
+
213
+ // content["name"] = file_name;
214
+
215
+ // content["content"] = file_content;
216
+
217
+ // }
218
+
219
+
220
+
221
+ // tran = new Transmission(
222
+
223
+ // "POST",
224
+
225
+ // content,
226
+
227
+ // (data) => {
228
+
229
+ // console.log(data);
230
+
231
+ // }
232
+
233
+ // );
234
+
235
+ // tran.send("http://127.0.0.1:8000/api/command/?format=json");
236
+
237
+ // }
238
+
239
+ // });
240
+
241
+ document.getElementById("send").addEventListener("click", e => {
242
+
243
+ const cmd = document.getElementById("cmd");
244
+
245
+ if(cmd.value != "") {
246
+
247
+ let content = {
248
+
249
+ response: "hogheoh",
250
+
251
+ }
252
+
253
+ if(file_name != null && file_content != null) {
254
+
255
+ content["name"] = file_name;
256
+
257
+ content["content"] = file_content;
258
+
259
+ }
260
+
261
+
262
+
263
+ tran = new Transmission(
264
+
265
+ "PATCH",
266
+
267
+ content,
268
+
269
+ (data) => {
270
+
271
+ console.log(data);
272
+
273
+ }
274
+
275
+ );
276
+
277
+ tran.send("http://127.0.0.1:8000/api/command/2/?format=json");
278
+
279
+ }
280
+
281
+ });
282
+
283
+ console.log(document.getElementById("target").value);
284
+
285
+ }
286
+
287
+
288
+
289
+
290
+
83
291
  ```
84
292
 
85
293
 

3

ほげ

2020/11/17 01:51

投稿

_ecs
_ecs

スコア9

test CHANGED
File without changes
test CHANGED
@@ -46,6 +46,42 @@
46
46
 
47
47
  ```
48
48
 
49
+ 追記
50
+
51
+ ```javascript
52
+
53
+ let file_name = file_content = null;
54
+
55
+ // ファイル中身を展開しbase64エンコード
56
+
57
+ document.querySelector('.custom-file-input').addEventListener('change',function(e){
58
+
59
+ const file = document.getElementById("input_file").files[0];
60
+
61
+ const next_sibling = e.target.nextElementSibling;
62
+
63
+ file_name = file.name;
64
+
65
+ next_sibling.innerText = file_name;
66
+
67
+ if (1 <= document.getElementById("input_file").files.length) {
68
+
69
+ let reader = new FileReader();
70
+
71
+ reader.onload = the_file => {
72
+
73
+ file_content = btoa(encodeURIComponent(the_file.target.result));
74
+
75
+ }
76
+
77
+ reader.readAsText(file, "utf-8");
78
+
79
+ }
80
+
81
+ });
82
+
83
+ ```
84
+
49
85
 
50
86
 
51
87
  ### 補足情報（FW/ツールのバージョンなど）

2

ほげ

2020/11/17 01:30

投稿

_ecs
_ecs

スコア9

test CHANGED
File without changes
test CHANGED
@@ -53,3 +53,5 @@
53
53
 
54
54
 
55
55
  python3
56
+
57
+ django rest framework

1

ほげ

2020/11/17 01:04

投稿

_ecs
_ecs

スコア9

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  base64.b64decode(
38
38
 
39
- validated_data['content']
39
+ validated_data['content'] #jsでエンコードされた文字列
40
40
 
41
41
  ).decode()
42
42