vux アップローダーの画像アップロード コンポーネントの使用方法

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

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>

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

画像
タイプ: 配列
デフォルト値: []、空の配列
意味: 画像配列、形式は [ { url: '/url/of/img.ong' }, ...]
備考: 変数は配列 データフローが双方向の場合、コンポーネント内の配列の値を変更すると親コンポーネントに影響します
max
型: 数値
デフォルト値: 1
意味: 画像の最大数
備考: 画像が最大値に達したとき値を指定すると、新しいボタンが消えます
showHeader
型: Boolean
デフォルト値: true
意味: ヘッダーを表示するかどうか
備考: ヘッダー全体の表示を制御します
title
型: String
デフォルト値: 画像アップロード
意味:ヘッダーのタイトル
備考: 表示しない場合は空白
showTip
型: Boolean
デフォルト値: true
意味: ヘッダーのデジタル部分、つまり1/3部分を表示するかどうか
備考: showHeaderがfalseの場合、ヘッダーは全体として非表示になり、このパラメータは現時点では無効です
readonly
型: Boolean
デフォルト値: false
意味: 読み取り専用かどうか
備考: 読み取り専用の場合、新規ボタンと削除ボタンはhidden
handleClick
タイプ: Boolean
デフォルト値: false
意味: 新しいボタンのクリックイベントを引き継ぐかどうか、Yes の場合、[追加] ボタンをクリックしても画像選択インターフェイスが自動的に表示されなくなります
注: true の場合、クリック[追加] ボタンをクリックし、$emit('add-image') をクリックすると、このイベント内でカスタマイズされた画像の選択やその他の操作を実行できます。その後、写真の追加、アップロード、削除はすべてユーザーによって引き継がれます
autoUpload
型: Boolean
デフォルト値: 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
タイプ :
Object デフォルト値 : 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 サイトの他の関連記事にも注目してください。

推奨読書:

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