vux Uploader 画像アップロードコンポーネントのインストールと使用について

この記事では、vux-uploader 画像アップロード コンポーネントのインストールと使用方法を主に紹介します。これは非常に優れており、必要な方は参考にしてください。ウェブサイト: https://github.com/greedying /vux-uploader

2.

npm install vux-uploader --save
npm install --save-dev babel-preset-es2015 
.babelrc

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "es2015",
  "stage-2"
 ],
 "plugins": ["transform-runtime"],
 "env": {
  "test": {
   "presets": ["env", "es2015", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}

をインストールします。 3.

// 引入组件
import Uploader from 'vux-uploader'
// 子组件
export default {
 ...
 components: {
  ...
  Uploader,
  ...
 }
 ...
}
// 使用组件
<uploader
 :max="varmax"
 :images="images"
 :handle-click="true"
 :show-header="false"
 :readonly="true"
 :upload-url="uploadUrl"
 name="img"
 :params="params"
 size="small"
 @preview="previewMethod"
 @add-image="addImageMethod"
 @remove-image="removeImageMethod"
></uploader>

を使用します。 パラメータの説明:

images

デフォルト値: []、空の配列
意味: [ { url: '/url/of/img.ong' }, ...] 形式の画像配列
注: 変数が配列の場合、データ フローは双方向であり、値を変更します。コンポーネント内の配列は親コンポーネントに影響します
max
タイプ: 数値
デフォルト値: 1
意味: 画像の最大数
注: 画像が最大値に達すると、新しいボタンが表示されなくなります
showHeader
タイプ: ブール値
デフォルト値: true
意味: ヘッダーを表示するかどうか
備考: ヘッダー全体の表示を制御します
title
型: String
デフォルト値: 画像アップロード
意味: ヘッダーのタイトル
備考: 表示しない場合は空白のままにしてください
showTip
型: Boolean
デフォルト値: true
意味: ヘッダーのデジタル部分、つまり1/3の部分を表示するかどうか
備考: showHeaderがfalseの場合、ヘッダー全体が非表示になり、このパラメータはは現時点では無効です
readonly
型: Boolean
デフォルト値: false
意味: 読み取り専用かどうか
備考: 読み取り専用の場合、追加ボタンと削除ボタンは非表示になります
handleClick
型: Boolean
デフォルト値: false
意味: 新しいボタンのクリックイベントを引き継ぐかどうか。そうする場合、新しいボタンをクリックしても画像選択インターフェイスが自動的に表示されなくなります
備考: true の場合、追加ボタンをクリックしてから $emit('add- image') を使用すると、このイベント内で画像の選択などのカスタマイズされた操作を実行できます。その後、画像の追加、アップロード、削除はユーザーによって引き継がれます
autoUpload
タイプ: ブール値
デフォルト値: true
意味:画像を選択した後に自動的にアップロードするかどうか。 「はい」の場合、内部アップロード インターフェイスが呼び出されます。いいえ、$emit('upload-image', formData)'、formData` は画像コンテンツであり、ユーザーはイベントをリッスンして自分でアップロードできます
注: handleClick が true の場合、画像の選択は実行できません。このパラメータは無効です。このパラメータが false の場合、画像を選択した後、$emit('upload-image', formData)'、formData` は画像のコンテンツです
uploadUrl
型: String
デフォルト値: ''
意味: の URL を受け取りますアップロードされた画像
備考 : 次の形式で json 文字列を返す必要があります。それ以外の場合は、autoUpload を false に設定して自分でアップロードしてください
.png"
}
}
name
Type: String
デフォルト値: img
意味: デフォルトでアップロードするときに画像に使用されるフォーム名
備考: なし
params
タイプ: Object
デフォルト値: null
意味: ファイルをアップロードするときにパラメータを運ぶ
備考: なし
size
タイプ: String
デフォルト値:normal
意味:サイズ型
備考:normalはweuiのデフォルトサイズ、smallは作者が定義した小さいサイズです
capture
型:String
デフォルト値:''
意味:inputの属性をキャプチャ
注: このとき、[追加] ボタンをクリックすると、携帯電話の各モデルの性能が異なることに注意してください。 handleClick が true の場合、この属性は無効です
発行イベントの説明
add-image
発行タイミング: handleClick パラメーターが true の場合、新しいボタンをクリックします
パラメーター: なし
備考: なし
remove-image
発行タイミング: handleClick パラメータ true の場合、削除ボタンをクリックします
パラメータ: なし
備考: handleClick が false の場合、削除ボタンをクリックすると、コンポーネント内の最初の画像が削除されます。それ以外の場合、ユーザーはこのイベントをリッスンして、対応する削除操作
プレビュー
発行タイミング : 画像がクリックされたとき
パラメーター: { url: 'imgUrl' } 形式の画像オブジェクト 注: ユーザーがイベントを監視する必要がある場合、自動プレビュー機能はまだ実装されていません。自分で実装できます
upload-image
送信タイミング: handleClick と autoUpload が両方とも false の場合、画像を選択します
パラメーター: formData、画像コンテンツから生成された formData
注: 画像の入力要素は vm を通じて取得できます。 $refs.input



上記はこの記事の全内容です。学習が役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連するおすすめ:

Vue には、固定テーブルヘッダーと最初の列を実装する複数の方法があります

VUE での v-bind の使用方法の紹介

vue-cli プロジェクトでモックデータを使用する方法

以上がvux Uploader 画像アップロードコンポーネントのインストールと使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。