この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。具体的な内容は次のとおりです。 アップロードされていないステータス アップロードステータス その他のステータス(表示/削除) カスタムコンポーネントファイル名 - ここでは UploadImg.vue と呼ばれます <テンプレート> <div> <el-form> <!-- :on-change="アップロードファイル" --> <el-アップロード :limit="limit" //アップロードできる最大数アクション accept="image/*" //アップロードを受け入れる:on-change="uploadFile" //ファイルの状態が変わったときの関数list-type="picture-card" //ファイルリストの種類:auto-upload="false" //ファイルを選択したらすぐにアップロードするかどうか:file-list="fileList" //仮想ファイル配列:on-exceed="handleExceed" //ファイル数が制限を超えたときの関数:on-preview="handlePictureCardPreview" //ファイルリストでアップロードしたファイルをクリックしたときの関数:on-remove="handleRemove" //ファイルリストからファイルを削除するときの関数ref="upload" クラス="アバターアップローダー" :class="{hide:showUpload}" // 最大制限に達した後にアップロード ボタンを非表示にするために使用されます: disabled="disabled" // アップロード失敗プロセスを表示するには> <i class="el-icon-plus"></i> </el-アップロード> //画像を表示 <el-dialog width="30%" :visible.sync="dialogVisible"> <img width="100%" :src="imgUrl.url" alt /> </el-ダイアログ> // 直接アップロードする必要はないが、ボタンをクリックして画像をアップロードする必要がある場合は、このメソッドを開いてください // 上記の el-upload タグの on-change を http-request メソッドに変更します<!-- <Button text="Upload" type="add_u" style="margin-top: 10px;" @click.native="submitUpload"></Button> --> </el-form> </div> </テンプレート> <スクリプト> // アップロード画像インターフェースを導入する import { uploadImg } from "@/api/public/api"; エクスポートデフォルト{ 小道具: { 制限: 数、 ファイルリスト: 配列、 無効: ブール値、 }, データ() { 戻る { showUpload: false, // 最大制限を制御した後、アップロードボタンを閉じます dialogVisible: false, // 画像のポップアップボックスを表示します imgUrl: [], // 画像をアップロードした後のアドレスの収集}; }, //アップロードされた写真の配列をリッスンします (自動レンダリングの問題と、変更時にアップロード ボタンが消える問題に対処するため)。 時計: ファイルリスト(新しい名前、古い名前) { newName.length == this.limit の場合、 this.showUpload = true; それ以外の場合は this.showUpload = false; }, }, メソッド: { //ファイルリストからファイルを削除する関数 handleRemove(file, fileList) { const index = this.fileList.findIndex((item) => item === file.uid); this.imgUrl.splice(インデックス、1); this.$emit("delUrl", this.imgUrl); fileList.length < this.limit の場合、 this.showUpload = false; }, //ファイルリストでアップロードされたファイルをクリックしたときの機能 handlePictureCardPreview(file) { this.imgUrl.url = ファイル.url; this.dialogVisible = true; }, //これは直接アップロードするのではなく、ボタン経由でアップロードする方法です。submitUpload() { this.$refs.upload.submit(); }, //ファイルステータスが変化したときの機能(メインロジック機能) アップロードファイル(e, ファイルリスト) { // アップロード ボタンを非表示にするユーザー アップロードの最大数を判断 if (fileList.length >= this.limit) this.showUpload = true; // const file = e.file; <- ここでは直接アップロードする必要はなく、ボタンからアップロードします const file = e.raw; // <- ここでは直接アップロードされます // サイズ const size = file.size / 1024 / 1024 / 2; もし ( !( ファイルタイプ === "image/png" || ファイルタイプ === "image/gif" || ファイルタイプ === "image/jpg" || ファイルタイプ === "image/jpeg" ) ){ this.$notify.warning({ タイトル: 「警告」、 メッセージ: 「image/png、image/gif、image/jpg、image/jpeg の形式で画像をアップロードしてください」 }); } そうでない場合 (サイズ > 2) { this.$notify.warning({ タイトル: 「警告」、 メッセージ:「画像サイズは2M未満でなければなりません」 }); } それ以外 { if (this.limit == 1) this.imgUrl = []; // 1つと判断する場合は、配列をクリアする必要があります const params = new FormData(); params.append("ソース", ファイル); アップロードImg(params).then((res) => { //ここで返されるデータ構造(独自の戻り構造に応じて変更してください) (res.data.status === 1)の場合{ this.$message.success("アップロードに成功しました"); this.imgUrl = res.data; //親コンポーネント メソッドを呼び出して、画像パラメータを渡します。this.$emit("getUrl", this.imgUrl); } そうでない場合 this.$message.error("アップロードに失敗しました"); }); } }, //ファイル数が制限を超えた場合の関数 handleExceed(files, fileList) { this.$message.info(`アップロードできる写真は ${this.limit} 枚のみです`); }, }, }; </スクリプト> //ここでアップロード前とアップロード後のスタイルを変更します(el-upload は見栄えが良くないので、自分で変更することもできます) <スタイル スコープ> .hide .el-upload--picture-card { 表示: なし !重要; } .avatar-uploader > .el-upload { 幅: 200ピクセル; 高さ: 200px; 行の高さ: 200px; 境界線の半径: 0px; 背景: #fff; 境界線: 1px 破線 #ccc; } .avatar-uploader > .el-upload > i { フォントサイズ: 28px; 色: #ccc; } .avatar-uploader > .el-upload-list { 表示: ブロック; } .avatar-uploader > .el-upload-list > .el-upload-list__item { 幅: 200ピクセル; 高さ: 200px; 表示: ブロック; } .avatar-uploader > .el-upload-list > .el-upload-list__item > img { 幅: 200ピクセル; 高さ: 200px; 境界線の半径: 0px; } </スタイル> ページ内での使用 - (ここではよく使うので、グローバルなものを記述します。自分のプロジェクトに合わせて決めてください) メイン.js //画像アップロードコンポーネント import UploadImg from "@/views/common/UploadImg.vue"; Vue.component('アップロード画像', アップロード画像) デモ.vue <el-form-item label="写真をアップロード"> //アップロードする画像の最大数を制限します //fileList 画像配列 //getUrl アップロードされたアドレスを取得します //delUrl アップロードされたアドレスを削除します // disabled 処理を無効にします <UploadImg :limit="1" :file-list="fileList" @getUrl="getUrl($event,'Parameters you need to carry')" @delUrl="delUrl($event,'Parameters you need to carry')" :disabled="true" /> </el-form-item> //変数宣言データ:{ ファイルリスト:[] } //関数 getUrl(getUrl){ コンソールログ(getUrl) }; delUrl(getUrl){ コンソールログ(getUrl) }; この記事がお役に立てれば幸いです!! 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Zabbix を使用して Oracle データベースを監視する方法の詳細な説明
>>: XHTML+CSS Web ページ作成における美しいスタイルシートの適用
以前、カスタム関数を使用して MySQL でツリー構造を再帰的にクエリする方法についての記事を書きま...
目次必要データを取得して送信するテンプレートフィルターフィルターの使用シナリオ要約する必要Vue を...
1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...
この記事では、スクロール可能なポップアップウィンドウ効果を実現するためのVueの具体的なコードを参考...
MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...
最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...
1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...
この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...
ブラウザのウェブページを最適化するためのいくつかのルールページの最適化静的リソース圧縮ビルド ツール...
v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...
目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...
1. ツールとライブラリをインストールする# PCRE は、Perl 互換の正規表現ライブラリを含...
目次1. querySelectorは単一の要素を照会する1. ドキュメントインスタンスの呼び出し2...
目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...
この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...