Vue.js始めるおれおれアドベントカレンダー2016 – 12日目
昨日のフォーム のやつで「ファイルはアレだよ」という話になってたので、アレするのを試してみました。
コードは抜粋しか記載してないのでGitHubの方で確認してください。
選択したファイルをプレビュー表示
ファイル情報の取得
<input @change="file_change" ref="file" type="file" multiple />
<ul v-if="form.files.length > 0">
<li v-for="(file, index) in form.files">
#{{index + 1}}
<ul>
<li>名前: {{file.name}}</li>
<li>サイズ: {{file.size.toLocaleString()}} bytes</li>
<li>種類: {{file.type}}</li>
</ul>
</li>
</ul>
file_change (event) {
const elFile = this.$refs.file
const files = elFile.files
form.commit('setFiles', files)
}
mutations: {
setFiles (state, files) {
state.files = Array.from(files).map(file => {
const data = {
name: file.name,
size: file.size,
type: file.type
}
state.files.push(data)
})
}
}
情報の所在
<input type="file"> の要素オブジェクトの files プロパティに格納されてます。
change イベントのタイミングで ref を使って参照します。でもってStoreに格納しました。
情報の形式
elForm.files は配列じゃなくてFileListなので、情報を配列に変換しました。
FileListをそのまま突っ込むと二度目以降の change イベントが発火しなくなった。
あ、あと multiple の有無によらずFileListなので、ひとつだけ選択してもらう場合は el.files[0] でアクセスします。
ファイル情報を純粋なオブジェクトへ変換
この例では単純に state.files = Array.from(files) だけでも間に合うんだけど、これから処理を足すので map() も併せて使ってます。あ、でもFileオブジェクトを突っ込むのも良くないのかな。なら今回みたいにして正解だ。
表示
v-for でくるくる出力。
というわけで、名前とか出すだけならこれで終わり。
画像を表示する
プレビュー機能を追加します。
state.files = Array.from(files).map(file => {
const data = {
name: file.name,
size: file.size,
type: file.type
}
if (file.type.startsWith('image/')) {
data.previewImageSrc = window.URL.createObjectURL(file)
}
…
<li v-if="file.previewImageSrc">
<img :src="file.previewImageSrc" :alt="`${file.name}のプレビュー画像`" class="form-files-imagePreview" />
</li>
画像かどうかの判定
file.type に種類が格納されていて、例えば image/png とか text/html とか。
これが "image/" で開始していれば画像と判断します。
画像URLの作成
createObjectURL() を使ってFileオブジェクトから特殊なURLを作成します。あんまりよくわかってない。
本当は使用後に revokeObjectURL() で解放してやるのが良いらしい。
オブジェクト URL が不要になった場合にはこれらを逐一 window.URL.revokeObjectURL() で削除するのが望ましいでしょう。ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリから解放します。しかし、パフォーマンスとメモリ使用を考慮し、明示的にアンロードできる安全な機会があるならば、そうするべきです。
テキストを表示する
ついでにテキストも。
state.files = Array.from(files).map(file => {
const data = {
name: file.name,
size: file.size,
type: file.type
}
…
if (file.type.startsWith('text/')) {
data.textContent = 'loading...'
const reader = new window.FileReader()
reader.onloadend = event => {
const text = event.target.result
data.textContent = text
}
reader.readAsText(file)
}
…
<li v-if="file.textContent">
ファイル冒頭:
<pre>{{file.textContent | textPreview}}</pre>
</li>
Vue.filter('textPreview', function (value, length = 128) {
let result = value.slice(0, length)
if (value.length > 128) {
result += '…'
}
return result
})
テキストかどうかの判定
画像と同じく "text/" で開始するかどうかで判定しました。
ただし、 *.js ファイルが application/javascript だったり *.csv が application/vnd.ms-excel だったりもするので、もうちょっとうまくやった方が良いかも。
テキストの内容を取得
ファイルの内容を読み込んで表示します。
読み込みにはFileReaderを使います。
読込処理が終了すると readyState は DONE に変わり、loadend イベントが生じます。それと同時に result プロパティにはファイルの内容が文字列として格納されます。
だそうです。
カスタムフィルターで冒頭だけ表示
冒頭部分に必要なら "…" を付けて抜き出してくれるフィルターを用意しました。
よくわからないこと
mutationの処理の中の非同期処理
良くないと聞いた。actionを通すとか？
まだそこらへん知らないので愚直にここに書いた。々ドキュメントを読もう……。
Bootstrapと <input type="file">
Vue関係ないんだけど。
ドキュメントの例だと何もしてない。
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
こんなもんか？
あとファイル情報の表示はもうあきらめてあんなになりました。 Thumbnail コンポーネント （？）を使うと良さそうだろうか。でも三種類あるんだよなー。
おしまい
デザインｪ……。
