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 のインストールと設定に関する詳細なチュートリアル

推薦する

Mysql binlog ログファイルが大きすぎる場合の解決策

目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...

Linux スワップメモリ​​を拡張する方法

スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...

MYSQL クエリの効率を向上させる 10 の SQL ステートメント最適化テクニック

MySQL データベースの実行効率はプログラムの実行速度に大きな影響を与えます。データベースの効率的...

mysql binlog (バイナリログ) を表示する方法

たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...

Windows 10 Home Edition に Docker for Windows をインストールする

0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...

ReactでCSSをエレガントに書く方法

目次1. インラインスタイル2. インポート方法を使用する3.cssモジュールのエクスポート4. ス...

MySQL マスター/スレーブ ステータスを監視するシェル スクリプト

Linuxでシェルスクリプトを共有して、MySQLのマスタースレーブ状態を監視し、エンタープライズW...

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

MySQLへのJava接続の基礎となるカプセル化の詳細な説明

この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...

Linux で CPU 使用率が高くなる原因をトラブルシューティングするプロセスの詳細な説明

目次序文始めるステップトラブルシューティング序文CPU 使用率が高くなるのは、オンラインでよくある問...

熟練デザイナーの7つの原則(2):色の使い方

<br />前回の記事:優秀なデザイナーの7つの原則(1):フォントデザイン 英語 原文...

Centos7 システムでの .NET Core 2.0 + Nginx + Supervisor 環境の構築

1. Linux .NET Core の紹介Microsoft は常に自社のプラットフォームに対して...

HTML で中国語を UTF-8 に変換する方法

HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...

ボタンをEnterキーに関連付けるjsコード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...