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

推薦する

JavaScript でネットワーク速度をテストする方法

目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...

SQL でテーブルにフィールドとコメントを追加する方法

1. フィールドを追加します。 alter table テーブル名 ADD フィールド名 タイプ;例...

CSS 8 目を引く HOVER 効果のサンプル コード

1. エフェクトHTMLを送信する <div id="送信ボタン">...

MySQL にテーブルデータを挿入するときに中国語の文字化けが発生する問題を解決する方法

1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...

JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡...

MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...

高さ:100% が機能しないのはなぜですか?

高さ:100% が機能しないのはなぜですか?この知識は不人気ではありませんが、使用する際には混乱する...

さまざまな Tomcat ログと catalina.out ファイルのセグメンテーションの関係についての簡単な分析

Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....

jsを使用してサーバーに写真をアップロードする

この記事の例では、参考のために画像をサーバーにアップロードするためのjsの具体的なコードを共有してい...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...

Javascript DOM、ノード、要素取得の紹介

目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...

MySQL イベント スケジューラに関するよくある話 (必読)

概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...

mysql57サービスが突然消えた問題をすぐに解決する

1つ、 G:\MySQL\MySQL Server 5.7\bin> mysqld --ini...

HTML に画像が存在しない場合にデフォルトの画像を表示する方法の例

画像リンク <img src="" /> jsを使用してURLが有効...

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...