Vueアプリでイメージアップロードパッケージを使う方法

Vue 3用のシンプルでカスタマイズ可能な画像アップロードコンポーネント.X

スクリーンショット



機能

を添付して、複数のイメージ

をアップロードしてください

更新画像と添付ファイル

は、イメージ高さと幅

をカスタマイズします

カスタマイズイメージアップロードタイトル

イメージ境界線をカスタマイズするBootstrapクラス

新しいイメージ付属品

の前にデフォルトイメージをカスタマイズしてください

デモ
https://vue-image-upload.netlify.app/

インストール
NPM経由でインストール

  npm i image-upload-vue

またはパッケージの依存関係セクションに含めます.JSON

  npm install --save image-upload-vue

グローバルにインストールする

  import ImageUploadVue from 'image-upload-vue'

  Vue.use(ImageUploadVue)

または個々のコンポーネントにインストールするには

    import 'ImageUpload' from 'image-upload-vue'

始める
シングルアップロード

    <image-upload action="create"
        :image_style="{
            border: 'rounded-circle',
            height: '100',
            width: '100'
        }"
    />

マルチアップロード

    <image-upload :upload_type="'multi'" action="edit" :urls="images"
        :image_style="{
            height: '100',
            width: '100'
        }"
    />

urlsはデータでありえるimagesの配列から成ります.

    data(){
        return{
            images: [
                require("@/assets/images/foobar.png"),
                "https://github.com/xxxxxx/xxxxx/xxxx/xxxxx/xxxxx/xxxx/foobar.png?raw=true"
            ]
        }
    },

博士
次の小文字をコンポーネントに渡すことができます.
支柱
説明
種類
デフォルト
アクション
これは、vue-image-uploadを実行するアクションを知っている
文字列
クリエイト
タイトル
これはファイル入力ボタンのテキストです
文字列
画像を選択
イマージュスタイル
これらはイメージスタイルのプロパティです
オブジェクト
高さ= 160、幅= 160
URL
単一のアップロードのためにロードされるイメージのURL/ファイル場所
文字列
URL
マルチアップロードにロードするイメージのURL/ファイルの場所
アレイ
アップロードタイプmultiにセットされるならば、複数のイメージはつくられて、編集されることができます
文字列
シングル
デフォルト
添付する前のコンポーネントのdeafult画像
文字列
default.png