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クエリ最適化に必須の知識ポイントのまとめ

序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...

CSS で 3D ブック効果を実装するためのサンプル コード

さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...

Linux で Sudo を使用して権限を委譲する

sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド&#...

VMwareのCentosシステムでNavicatがMySQLサーバーに接続できない問題を解決します

ホスト 'xxxx' はこの MySQL サーバーに接続できませんエラー: 1130...

デザイン理論: デザインにおける階層

<br />原文: http://andymao.com/andy/post/80.ht...

jQuery における Ajax の関連知識ポイントのまとめ

序文JavaScriptを学ぶ学生は、 AJAX (非同期JavaScriptとxml) 変換は非同...

小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明

序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...

Docker で Tomcat を使用して Web アプリケーションを迅速にデプロイする方法の例

Docker の基本的な操作を学習した後、コンテナにいくつかの基本的なアプリケーションをデプロイして...

はじめに: HTML の基本的なタグと属性の簡単な紹介

HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...

MySQL ステートメントに一重引用符またはバックスラッシュを含む値を挿入する方法

序文この記事では主に、シングルクォートやバックスラッシュを含む値を挿入するMySQLステートメントに...

http.server に基づく LAN サーバーの構築プロセスの分析

皆さんはこのような状況に遭遇したことがあるでしょうか。プロジェクトや研究開発を行う際に、緊急にファイ...

JavaScript はフロントエンド Web ページでカウントダウンを実装します

ネイティブJavaScriptを使用してカウントダウンを簡単に実装します。参考までに、具体的な内容は...

Grafana+Prometheus を使用して MySQL サービスのパフォーマンスを監視する

Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...

Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)

1. バックグラウンド実行一般的に、Linux 上のプログラムは .sh ファイル (./sh フ...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...