[Vue.js] ファイルアップロード＆バリデーション ( use bootstrap-vue )

See the Pen
vue.js(bootstrap-vue) File Upload by Tenderfeel (@Tenderfeel)
on CodePen.

なんでか初回はonchangeが反応しない挙動があった。
プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。

draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。
ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。

バリデーション

Fileが色々と情報をくれるのを利用して違反がないかチェックする。

error変数にエラーメッセージを入れるとします。

error: []

画像ファイル容量

if (val.size / 1000 > 200) {
  this.error.push(`ファイルサイズが大きすぎます（${Math.round(val.size / 1000)}/100KB）`)
}

ファイルタイプ

acceptを配列で持っといてそれを使い回すのがいいと思う

if (!['image/jpeg', 'image/png', 'image/gif'].includes(val.type)) {
  this.error.push('JPEG、PNG、GIF以外は利用できません')
}

画像高さ・横幅

画像サイズはFileやFileReaderからは分からないので、
プレビュー画像のonloadでgetBoundingClientRect取ってチェックする：

img.onload = (e) => {
  const rect = e.target.getBoundingClientRect();
  if (rect.width > 250) {
    this.error.push(`画像の横幅が大きすぎます(${rect.width}/250px)`)
  }
  if (rect.height > 250) {
    this.error.push(`画像の高さが大きすぎます(${rect.height}/250px)`)
  }

  if (!this.error.length) {
    img.classList.add('is-valid');
  } else {
    img.classList.remove('is-valid');
  }
}

この場合getBoundingClientRectがCSSの影響を受けるため、imgタグに対しては何も指定せず.is-validに width:100% などのスタイルを追加しておく。