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 <p style="text-align: left;">をインストールします。 パラメータの説明: <strong></strong></p><blockquote style="text-align: left;">
<p style="text-align: left;">画像<br> タイプ: 配列<br> デフォルト値: []、空の配列<br> 意味: [ { url: '/url/of/img.ong' }, ...] 形式の画像配列<br> 備考: 変数は配列です データフローが双方向の場合、コンポーネント内の配列の値を変更すると、親コンポーネントに影響します<br>max<br> タイプ: Number<br> デフォルト値: 1<br> 意味: 画像の最大数<br> 備考: 画像が最大値を指定すると、新しいボタンが消えます<br>showHeader<br> 型: Boolean<br> デフォルト値: true<br> 意味: ヘッダーを表示するかどうか<br> 備考: ヘッダー全体の表示を制御します<br>title<br> 型: String<br> デフォルト値: 画像アップロード<br> 意味: ヘッダーのタイトル<br> 備考: 表示しない場合は空白<br>showTip<br> 型: Boolean<br> デフォルト値: true<br> 意味: ヘッダーのデジタル部分、つまり1/3部分を表示するかどうか<br> 備考: showHeaderの場合false の場合、ヘッダーは全体として非表示になり、このパラメータは現時点では無効です<br>readonly<br> 型: Boolean<br> デフォルト値: false<br> 意味: 読み取り専用かどうか<br> 備考: 読み取り専用の場合、新規および削除されたボタンは非表示です<br>handleClick<br> タイプ: ブール値<br> デフォルト値: false<br> 意味: 新しいボタンのクリック イベントを引き継ぐかどうか、Yes の場合、[追加] ボタンをクリックしても画像選択インターフェイスが自動的に表示されなくなります <br> 注: true の場合、[追加] ボタンをクリックし、$emit('add-image') をクリックすると、このイベント内でカスタマイズされた画像の選択やその他の操作を実行できます。その後、写真の追加、アップロード、削除はすべてユーザーによって引き継がれます<br>autoUpload<br> タイプ: ブール値<br> デフォルト値: true<br> 意味: 写真を選択した後に自動的にアップロードするかどうか。 「はい」の場合、内部アップロード インターフェイスが呼び出されます。いいえ、$emit('upload-image', formData)'、formData` は画像コンテンツであり、ユーザーはイベントをリッスンして自分でアップロードできます<br> 注: handleClick が true の場合、画像の選択は実行できません。このパラメータは無効です。このパラメータが false の場合、画像を選択した後、$emit('upload-image', formData)'、formData` は画像のコンテンツです<br>uploadUrl<br> 型: String<br> デフォルト値: ''<br> 意味: の URL を受け取りますアップロードされた画像<br> 備考: 次の形式で JSON<a href="http://www.php.cn/wiki/57.html" target="_blank"> 文字列 </a> を返す必要があります。それ以外の場合は、Autoupload を false に設定してください <br> {<br> result: 0, <br> message: "Result is not 0 <a href="http://www.php.cn/php/php-tp-errormessage.html" target="_blank"> error information </a>", <br> data: {<br> url: "" http://image.url.com/image.png"<br>}}} <br>name<br> Type: String<br> デフォルト値: IMG<br> 意味: デフォルトでアップロードされるときのフォーム名 <br> 注: いいえ<br>params<br> タイプ: オブジェクト<br> デフォルト値: null<br> 意味: ファイルをアップロードするときにパラメータを運びます<br> 備考: なし<br>size<br> タイプ: String<br> デフォルト値:normal<br> 意味: サイズ型<br> 備考: Normal は、デフォルトのサイズですweui、小さいサイズは作者によって定義されたサイズです いくつかのサイズ<br>キャプチャ<br> タイプ: 文字列<br> デフォルト値: ''<br> 意味: 入力の属性をキャプチャします<br> 注: このとき、新しいボタンをクリックすると、カメラに設定できます。また、一部の機種では直接カメラが起動する場合がありますので、機種ごとに動作が異なりますのでご注意ください。 handleClick が true の場合、この属性は無効です<br> 発行イベントの説明<br>add-image<br> 発行タイミング: handleClick パラメーターが true の場合、新しいボタンをクリックします<br> パラメーター: なし<br> 備考: なし<br>remove-image<br> 発行タイミング: handleClick パラメータ true の場合、削除ボタンをクリックします<br> パラメータ: なし<br> 備考: handleClick が false の場合、削除ボタンをクリックすると、コンポーネント内の最初の画像が削除されます。それ以外の場合、ユーザーはこのイベントをリッスンして、対応する削除操作<br>プレビュー<br> 発行タイミング : 画像がクリックされたとき<br> パラメーター: { url: 'imgUrl' } 形式の画像オブジェクト 注: ユーザーがイベントを監視する必要がある場合、自動プレビュー機能はまだ実装されていません。自分で実装できます<br>upload-image<br> 出力タイミング: handleClick と autoUpload が両方とも false の場合、画像を選択します <br> パラメーター: formData、画像コンテンツから生成された formData <br> 注: 画像の入力要素は vm を通じて取得できます。 $refs.input <br><br></p> この記事の事例などを読んで、あなたはこの方法をマスターしたと思います。なんとも興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。 </blockquote><p>推奨読書: </p><p></p> AngularJS で $http サービスを使用する方法の詳細な説明<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397247.html" target="_blank"></a><br></p>vue addRoutes 動的パーミッションルーティングメニューを実装する手順の詳細な説明<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397246.html" target="_blank"></a></p>

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