この記事では、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プログラムの問題を解決する
職業的な観点からも、人生の観点からも、良い再建をすることは本当に簡単ではありません。楽観的で熱心で前...
序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...
1. 元のmariadbを削除します。削除しないとmysqlをインストールできません。 mariad...
目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...
自分でウェブページを書きたいので、HTML 言語についても少し勉強しています。これは、大学時代にウェ...
VM Ware 仮想マシン CentOS の時刻は、次の図に示すように、現地時間と一致しません。おそ...
目次分散IDソリューションの概要データベース自動増分IDデータベースマルチマスターモード数値セグメン...
vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...
jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...
目次1. 浅いクローニング2. ディープクローニング1. 浅いクローニング浅いクローンでは配列やオブ...
通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...
目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...
序文この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と...
UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...
目次1. カスタムルーティング2. タブナビゲーション3. データの返却要約する1. カスタムルーテ...