フォームにフォームのアップロード画像が表示され、プレビューをクリックできます

適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。

• Crmシステムでは、顧客訪問は実際に訪問した画像をアップロードする必要があることが多く、データ分析を行うときに、どのようにして表に表示し、プレビューできるのでしょうか
• It機器管理システムでは、it機器の入庫時に関連する画像があり、データ分析を行うときに、どのようにして表に表示し、プレビューできるのでしょうか

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• レポート
• This.utils.preview ()

効果を実現する

複数の画像が存在する場合は、画像をクリックすると、前の画像または次の画像に切り替えることができます。

実装手順

通常のフォームページの作成

通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。

キャンバス領域で次のコンポーネントをドラッグします。

• 画像アップロード: 名前を画像アップロード

レポートの作成ページ

レポート作成ページ、詳細はこちらを参照レポートの作成。

キャンバス領域で次のコンポーネントをドラッグします。

• 基礎表

レポートページの設定

データセットを選択し、テーブル列を設定します。

画像アップロード _ ダウンロード先列非表示を設定します。

データセットを選択し、フィルタ条件を構成します。

ページロード完了時のアクションの設定

次のコードを追加し、「ok」をクリックします。

function didMount() {
  // 页面节点加载渲染完毕
  window._custom_utils = this.utils;
}

画像プレビューリンクのジャンプを設定します

設定手順は次のとおりです。ここで私たちのパラメータ名はImageurlsここのパラメータ値は画像アップロード _ ダウンロード先。

カスタム実行内容は、次のコードを構成します。

function onLinkClicked(info) {
  const { cardParams = {} } = info;
  const { imageUrls = [] } = cardParams;
  if (imageUrls.length) {
    window._custom_utils.previewImage({
      urls: imageUrls[0].split(','),
      current: imageUrls[0].split(',')[0],
    });
  }
}

保存ページ

オンラインで試遊する