プロジェクトシナリオ:1. アップロードファイルの制限 関数: 1. フロントエンド操作による異常なファイルのアップロードを防ぐ 機能性: 1. ファイルインスタンスを取得する コードは次のとおりです。 //サイズ制限 checkFileSize(file, rules) { 新しい Promise を返します ((resolve, reject) => { ファイルサイズ / 1024 / 1024 > ルール ? 拒否() : 解決() })。それから( () => { 真を返す }, () => { //操作プロンプト return Promise.reject() } ) }, //アップロード形式の制限 checkFileType(file, rules) { 新しい Promise を返します ((resolve, reject) => { ルール && rules.includes(file.type) ? 解決() : 拒否() })。それから( () => { 真を返す }, () => { //操作プロンプト return Promise.reject() } ) }, //アスペクト比(画像) checkImageWH(ファイル、ルール) { const _this = これ 新しい Promise を返します ((resolve, reject) => { //ファイルを読み取る const filereader = new FileReader() filereader.readAsDataURL(ファイル) ファイルリーダー.onload = e => { 定数src = e.target.result 定数イメージ = 新しいイメージ() イメージ.onload = 関数() { //データを分析し、ルールに準拠しているかどうかを判断します。resolve() } image.onerror = 拒否 画像.src = src } })。それから( () => { 真を返す }, () => { //操作プロンプト return Promise.reject() } ) }, //アスペクト比(ビデオ) checkVideoWH(ファイル、ルール) { 新しいPromise(function(resolve,reject)を返す{ var url = URL.createObjectURL(ファイル) var ビデオ = document.createElement('ビデオ') ビデオ.onloadedmetadata = evt => { URL.revokeObjectURL(url) //データを分析し、ルールに準拠しているかどうかを判断します。resolve() } video.src = URL video.load() // メタデータを取得します })。それから( () => { 真を返す }, () => { //操作プロンプト return Promise.reject() } ) } 実際の通話 //ファイルインスタンスを取得する Screen(){ // 権限ルールを取得します const { filesSize, filesFormat, fileLimit} = this // ファイルサイズ、ファイルタイプ、画像/ビデオの幅と高さの制限 // パラメータの判定 const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true const isFileType = filesFormat ? this.checkFileType(file, filesFormat) を待ちます: true //画像マテリアルif (fileLimit && fileLimit.type * 1 === 1) { const isImageLimit = fileLimit? this.checkImageWH(file, fileLimit) を待ちます: true //出力結果 return isFileSize && isFileType && isImageLimit } そうでない場合 (fileLimit&& fileLimit.type * 1 === 2) { //ビデオ素材 const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true //出力結果 return isFileSize && isFileType && isVideoLimit } それ以外 { //制限なし //出力結果 return isFileSize && isFileType } } まとめ: 1. インスタンスを取得する JavaScript アップロードファイル制限パラメータの詳細なケースに関するこの記事はこれで終わりです。より関連性の高い js アップロードファイル制限パラメータの内容については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLサーバーは--read-onlyオプションで実行されているため、このステートメントを実行できません
>>: Ubuntu 20.04 に Xrdp サーバー (リモート デスクトップ) をインストールする方法
データベースコマンド仕様すべてのデータベース オブジェクト名には小文字を使用し、アンダースコアで区切...
HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...
この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...
目次背景表領域の断片化とは何ですか?表領域の断片化を確認する方法表スペースの断片化問題を解決する方法...
この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...
ディスク クォータは、コンピューター内の指定されたディスクのストレージ制限です。つまり、管理者はユー...
質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...
チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...
npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...
目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...
マイクロソフトIIS (Internet Information Server) は、Microso...
目次1. クエリキャッシュの実装プロセス2. クエリキャッシュを構成する3. クエリキャッシュを有効...
1. ノードを削除するkubectl delete node node01を実行します。 2. この...
0. 事前準備BIOS でセキュア ブートを無効にします。無効にしないと、サードパーティ ソースを...
目次1. コンポーネントとは何ですか? 2. グローバルコンポーネントを作成する方法1 1. Vue...