投稿日：
2019年9月24日
最終更新日：
【TypeScript】FileReaderのevent.target.resultがString型に代入出来ない時の原因と対策【ArrayBuffer】
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
created by Rinker
¥61,300
(2025/01/05 20:59:47時点 楽天市場調べ-詳細)
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
TypeScriptでコンパイルエラー
TypeScriptを利用して、Formのファイル選択時にサムネイルを出そうと思い、以下のようなコーディングをした際にTypeScriptのエラーが発生しました。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<template lang="pug">
...
(略)
...
</template>
<script lang="ts">
...
(略)
...
export default class App extends Vue {
private imageData: string = "";
...
(略)
...
fileChange(event) {
let selectFile = event.target.files[0]
let path = this.file;
let reader = new FileReader()
reader.onload = (e) => {
let result = e.target.result
this.imageData = result // エラー
};
reader.readAsDataURL(selectFile)
}
...
(略)
...
</script>
|
|
1
2
|
Type 'string | ArrayBuffer' is not assignable to type 'string'.
Type 'ArrayBuffer' is not assignable to type 'string'.
|
原因と対応
原因
これは、e.target.resultの戻り値の型がstring | ArrayBufferとなっているため、フィールドの型定義も同様にstring | ArrayBufferにする必要があります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<template lang="pug">
...
(略)
...
</template>
<script lang="ts">
...
(略)
...
export default class App extends Vue {
private imageData: string | ArrayBuffer = "";
...
(略)
...
fileChange(event) {
let selectFile = event.target.files[0]
let path = this.file;
let reader = new FileReader()
reader.onload = (e) => {
let result = e.target.result
this.imageData = result
};
reader.readAsDataURL(selectFile)
}
...
(略)
...
</script>
|
これでエラーが出なくなります。
終わりに
以上のように、対応方法はとても簡単です。
お困りの方はこちらの方法を試してみてください。