この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介します。具体的な内容は次のとおりです。 HTML部分 <テンプレート> <div class="contWrap"> <バンアップローダー v-model="ファイルリスト" :multiple="true" :before-read="beforeRead" :after-read="afterRead" :before-delete="アップロード画像を削除" アップロードアイコン="プラス" > <!-- 注: これはカスタムアップロードスタイルです --> <!-- <p> <バンアイコン 名前="プラス" カラー=”#07c160” サイズ=".5rem" /> 写真をアップロード</p> --> </van-uploader> </div> </テンプレート> js部分 <スクリプト> 「axios」からaxiosをインポートします。 エクスポートデフォルト{ 名前: "uploadImages", データ() { 戻る { ファイルリスト: [], アップロード URL: "/api/upload/fileUpload", ヘッダー: { トークン: this.$store.state.account.token, }, }; }, メソッド: { // ブール値を返す beforeRead(file) { if (ファイルインスタンス配列) { //配列ファイルかどうかを判定します。forEach((v) => { this.checkFile(v); }); } それ以外 { this.checkFile(ファイル); } true を返します。 }, //画像タイプ checkcheckFile(file) { const フォーマット = ["jpg", "png", "jpeg"]; 定数インデックス = file.name.lastIndexOf("."); const finalName = file.name.substr(インデックス + 1); if (!format.includes(finalName.toLowerCase())) { Toast("アップロードしてください" + format.join(",") + "画像をフォーマットしてください"); false を返します。 } }, afterRead(ファイル) { // この時点で自分でファイルをサーバーにアップロードできます if (file instanceof Array) { ファイル.map((v) => { v.status = "アップロード中"; v.message = "アップロード中..."; this.uploadImg(v); }); } それ以外 { file.status = "アップロード中"; file.message = "アップロード中..."; this.uploadImg(ファイル); } }, //アップロード uploadImg(file) { フォームデータを作成します。 formData.append("ファイル", file.file); アクシオス .post(this.uploadUrl, フォームデータ, { ヘッダー: this.headers、 }) .then((res) => { (res.data)の場合{ if (ファイルインスタンス配列) { //配列ファイルかどうかを判定します。map((v, i) => { v.status = "成功"; v.メッセージ = ""; v.url = res.data[i]; }); } それ以外 { file.status = "成功"; ファイル.メッセージ = ""; ファイルのURLをres.data.uploadUrlに設定します。 } } }) .catch((エラー) => { これを通知します。{ タイプ:「警告」、 メッセージ: 「アップロードに失敗しました」、 }); }); }, //削除 delUploadImg(item) { this.fileList = this.fileList.filter((v) => v.url != item.url); } }, }; </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VScode設定のリモートデバッグLinuxプログラムの問題を解決する
圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...
黄金律常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関...
コマンドを実行してプラグインpostcss-pxtoremをインストールします npm インストール...
1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...
この記事では、テーブルのページング効果を実現するためのjQueryの具体的なコードを参考までに紹介し...
1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...
ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...
目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...
序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...
Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...
序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...
導入スロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメントを記録で...
質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...
ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...
show-header属性を使用したドキュメントのヒントshow-header <el-テーブ...