質問アップロードするファイルのタイプを 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Hadoop 2.x と 3.x の 22 ポイントの比較、Hadoop 3.x の 2.x に対する改善点
>>: MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル
データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...
今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...
JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...
目次1. ReactとAntdを組み合わせてログイン機能を実現2. ReactとAntdを組み合わせ...
Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...
MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...
フレーム構造タグ <frameset></frameset>フレームを使用す...
以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...
この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...
背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...
ページをデザインするときには、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ペー...
1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...
目次アレイ重複排除1. from() を新しい Set() メソッドに重ねる2. スプレッド演算子 ...
この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...
目次1. 問題2. 解決策2.1 ページングコンポーネント2.2 データベースデータを取得する関数:...