ファイルからデータを読み取る必要がある場合があります。 以前は、サーバーに送信して、必要なデータを返す必要がありました。 現在では、 FileReaderAPIを使用してブラウザから直接ファイルにアクセスすることもできます。
UIレベルでテキストファイルを使用して些細なことを行うためにテキストファイルを読み取りたいだけの場合は、ファイルをサーバーに送信する必要はありません。 例として、ファイルからテキストエリアを埋める場合があります。
FileReader API
FileReader APIは、FileまたはBlobオブジェクトタイプを使用してさまざまな方法でデータを読み取るための優れたインターフェイスを提供します。
FileReaderインスタンスには readAsText ファイルをテキストとして読み取るために使用できるメソッド：
const reader = new FileReader();
reader.readAsText(file);
FileReader APIは非同期であるため、状態を取得するために使用できるいくつかのイベントを公開します。 特に、 onload ファイルが読み取られたときにデータにアクセスするイベント：
const reader = new FileReader();
reader.onload = e => console.log(e.target.result);
reader.readAsText(file);
ご覧のとおり、テキストデータには次の方法でアクセスできます。 e.target.result.
ファイルリーダーコンポーネント
前のコードはすでにファイルを読み取っていますが、それでもファイルオブジェクトを指定する必要があります。 そのためには、 <input type="file"> トリガーするHTMLタグ change 経由でファイルにアクセスできるイベント ev.target.files.
FileReader.vueコンポーネントを作成してすべてをまとめましょう。
<template>
<label class="text-reader">
<input type="file" @change="loadTextFromFile">
</label>
</template>
<script>
export default {
methods: {
loadTextFromFile(ev) {
const file = ev.target.files[0];
const reader = new FileReader();
reader.onload = e => this.$emit("load", e.target.result);
reader.readAsText(file);
}
}
};
</script>
コンポーネントは放出しています load 親コンポーネントがデータを処理できるようにするためのイベント。
コンポーネントの使用
App.vue コンポーネントがすでにセットアップされているとしたら、それを使用してコンポーネントのデモを行いましょう。
<template>
<div id="app">
<textarea rows="10" v-model="text"></textarea>
<br>
<text-reader @load="text = $event"></text-reader>
</div>
</template>
<script>
import FileReader from "./FileReader";
export default {
name: "app",
data: () => ({ text: "" }),
components: {
FileReader
}
};
</script>
追加する必要があります text データプロパティ。例として、を使用してテキスト領域にバインドします。 v-model. 最後に、 @load イベントと設定 text 経由でイベントペイロードへのプロパティ $event.
ボーナス：ファイルボタンのスタイリング
The <input type="file"> タグはブラウザごとに異なる方法でレンダリングされます。 カスタムスタイルが必要な場合は、非表示にしてスタイルを設定できます <label> 代わりにタグを付けてください。
入力を非表示にするには、 opacity: 0; cssプロパティ。 使用する display: block; また visibility: hidden; そのアクセシビリティを壊します。
また、ラベルの後ろに配置するには、ポジショニングとz-indexの組み合わせが必要です。
<template>
<label class="text-reader">
Read File
<input type="file" @change="loadTextFromFile">
</label>
</template>
<style>
.text-reader {
position: relative;
overflow: hidden;
display: inline-block;
/* Fancy button style 😎 */
border: 2px solid black;
border-radius: 5px;
padding: 8px 12px;
cursor: pointer;
}
.text-reader input {
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
}
</style>
これでうまくいくはずです。ファイル入力ボタンは完全に機能するはずです。
コードとデモはこのコードサンドボックスで見ることができます。
涼しくしてください🦄
