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 のファイル圧縮とパッケージ化の概要

1. 圧縮と包装の概要一般的な圧縮ファイルウィンドウズ .rar .zip .7z Linux .z...

Docker で Redis センチネル モードを構成する方法 (複数のサーバー上)

目次序文状態DockerをインストールするRedisのマスターノードとスレーブノードを構成する序文以...

MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....

Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...

MySQL バッチ挿入ループの詳細なサンプルコード

背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...

postcss-pxtorem モバイル適応の実装

コマンドを実行してプラグインpostcss-pxtoremをインストールします npm インストール...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

dl、dt、dd はいつ使用するのが適切ですか?

dl:定義一覧定義リストdt:定義タイトルタイトルを定義するdd:定義説明定義の説明dt は情報のタ...

Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する(サンプルコード)

現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...

Linux スワップ パーティション (詳細説明)

目次リナックス1. SWAPとは2. swappiness は何を調節しますか? 3. スワップ操作...

VueでTypescriptの設定手順を使用する

目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...

WeChatアプレットでグローバル変数を監視する方法

最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...

Linuxでユーザーが所属するグループを変更する方法

Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...

mysql5.7.21.zip インストールチュートリアル

mysql5.7.21 zipの詳細なインストール手順は次のとおりです。 1. 解凍して指定されたデ...

HTML 左、中央、右の適応レイアウト (calc css 式を使用)

最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...