Element-ui アップロードファイルのアップロード制限の解決策

Element-ui アップロードファイルのアップロード制限の解決策

質問

アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしません。「すべてのファイル」を選択した後でも、あらゆるタイプのファイルをアップロードすることができ、制限効果はまったくありません。

解決

before-upload フック(ファイルをアップロードする前のフック、パラメータはアップロードされたファイル、false を返すか、Promise を返して拒否された場合は、アップロードが停止されます)で判断を行います。ここで落とし穴があります。:auto-upload="false" を設定すると、このフックはトリガーされなくなるため、on-change で判断することもできます。

コードについて

// :before-upload または :on-change バインディングメソッド beforeUpload(file, fileList) {
   if (file.size / (1024 * 1024) > 500) { // ファイルサイズを制限する this.$message.warning(`現在の制限ファイルサイズは 500M を超えることはできません`)
     偽を返す
   }
   
   let suffix = this.getFileType(file.name) //ファイルのサフィックスを取得します。let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //ファイルの種類は限られているので、状況に応じて定義します。if (suffixArray.indexOf(suffix) === -1) {
     this.$メッセージ({
       メッセージ: 「ファイル形式エラー」、
       タイプ: 'エラー'、
       期間: 2000
     })
   }
   suffixArrayを返す
 },
 getFileType(名前) {
   startIndex = name.lastIndexOf('.') とします。
   開始インデックスが -1 の場合
     name.slice(startIndex + 1).toLowerCase() を返す
   } それ以外 {
     戻る ''
   }
 }

Element-ui のアップロードファイル制限の解決方法についてはこれで終わりです。Element のアップロード制限の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • element-ui の el-upload を使用して複数のファイルを一度にアップロードする実装
  • Element-uiファイルアップロードメソッドでファイル名を変更する例
  • Element-UI でアップロードされたファイルのフロントエンド処理の詳細な説明
  • Element-ui は写真をアップロードした後にアップロードボタン機能を非表示にします
  • 複数ファイルのアップロードのElement-ui実装例
  • vue-cli3.0+element-ui アップロードコンポーネント el-upload の使用
  • element-ui 写真をアップロードした後、座標点をマークします

<<:  Hadoop 2.x と 3.x の 22 ポイントの比較、Hadoop 3.x の 2.x に対する改善点

>>:  MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

推薦する

Linuxのdateコマンドの使用

1. コマンドの紹介date コマンドは、現在の時刻または指定された時刻を指定された形式で表示するた...

Linux コマンドにおける Ctrl+z、Ctrl+c、Ctrl+d の違いと使い方

Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...

JS のあらゆる場所で絶対等価演算子の使用をやめる

目次概要1. NULL値のテスト2. ユーザー入力を読み取る導入事実の根源はどこにあるのでしょうか?...

Linux の MariaDB データベースについて

目次Linux の MariaDB データベースについて1. データベースとは何ですか? 2. デー...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

vue3で注意すべき2つのポイントを詳しく解説:セットアップ

目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...

純粋な CSS3+DIV で小さな三角形の境界線効果を実現するためのサンプル コード

具体的なコードは次のとおりです。 HTMLコードは次のとおりです <div class=&qu...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

MySQLの数値型自動増分における落とし穴

テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...

MySQL のフィールドに一意のインデックスを追加および削除する方法

1. PRIMARY KEY(主キーインデックス)を追加するmysql>ALTER TABLE...

MySQL の日付関数と日付変換およびフォーマット関数

MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...

Vue が学ぶべき知識ポイント: forEach() の使用

序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...

フィールドの文字セットの違いによる MySQL のインデックス失敗の解決策

インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...

Linux デスクトップ用の 4 つのスキャン ツール

ペーパーレスの世界はまだ到来していませんが、書類や写真をスキャンすることで紙をなくす人が増えています...