vux アップローダー イメージ アップロード コンポーネントの使用方法のチュートリアル

今回は、vux アップローダーの画像アップロード コンポーネントの使用方法についてのチュートリアルをお届けします。vux アップローダーの画像アップロード コンポーネントを使用する際の 注意事項 について、実際のケースを見てみましょう。

1. ウェブサイト:

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"]
  }
 }
}

をインストールします。 パラメータの説明:

画像
タイプ: 配列
デフォルト値: []、空の配列
意味: [ { url: '/url/of/img.ong' }, ...] 形式の画像配列
備考: 変数は配列です データフローが双方向の場合、コンポーネント内の配列の値を変更すると、親コンポーネントに影響します
max
タイプ: Number
デフォルト値: 1
意味: 画像の最大数
備考: 画像が最大値を指定すると、新しいボタンが消えます
showHeader
型: Boolean
デフォルト値: true
意味: ヘッダーを表示するかどうか
備考: ヘッダー全体の表示を制御します
title
型: String
デフォルト値: 画像アップロード
意味: ヘッダーのタイトル
備考: 表示しない場合は空白
showTip
型: Boolean
デフォルト値: true
意味: ヘッダーのデジタル部分、つまり1/3部分を表示するかどうか
備考: showHeaderの場合false の場合、ヘッダーは全体として非表示になり、このパラメータは現時点では無効です
readonly
型: Boolean
デフォルト値: false
意味: 読み取り専用かどうか
備考: 読み取り専用の場合、新規および削除されたボタンは非表示です
handleClick
タイプ: ブール値
デフォルト値: false
意味: 新しいボタンのクリック イベントを引き継ぐかどうか、Yes の場合、[追加] ボタンをクリックしても画像選択インターフェイスが自動的に表示されなくなります
注: 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 に設定してください
{
result: 0,
message: "Result is not 0 error information ",
data: {
url: "" http://image.url.com/image.png"
}}}
name
Type: String
デフォルト値: IMG
意味: デフォルトでアップロードされるときのフォーム名
注: いいえ
params
タイプ: オブジェクト
デフォルト値: null
意味: ファイルをアップロードするときにパラメータを運びます
備考: なし
size
タイプ: String
デフォルト値:normal
意味: サイズ型
備考: Normal は、デフォルトのサイズですweui、小さいサイズは作者によって定義されたサイズです いくつかのサイズ
キャプチャ
タイプ: 文字列
デフォルト値: ''
意味: 入力の属性をキャプチャします
注: このとき、新しいボタンをクリックすると、カメラに設定できます。また、一部の機種では直接カメラが起動する場合がありますので、機種ごとに動作が異なりますのでご注意ください。 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 サイトの他の関連記事にも注目してください。

推奨読書:

AngularJS で $http サービスを使用する方法の詳細な説明

vue addRoutes 動的パーミッションルーティングメニューを実装する手順の詳細な説明

以上がvux アップローダー イメージ アップロード コンポーネントの使用方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。