画像ファイルをアップロードするためにカスタムファイルアップローダーを構築する必要がありますが、元のデザインの入力ファイルは使用しませんが、非表示にしてボタンを表示するだけです。VueJS:ボタンから入力ファイルをトリガーする
そして、私は、jQueryとAngularJSで別のボタンをクリックしたときに入力ファイルをトリガーする方法を知っていますが、VueJSで同じことをする方法が見つからないのですか?
大切にしてください!
画像ファイルをアップロードするためにカスタムファイルアップローダーを構築する必要がありますが、元のデザインの入力ファイルは使用しませんが、非表示にしてボタンを表示するだけです。VueJS:ボタンから入力ファイルをトリガーする
そして、私は、jQueryとAngularJSで別のボタンをクリックしたときに入力ファイルをトリガーする方法を知っていますが、VueJSで同じことをする方法が見つからないのですか?
大切にしてください!
これはすばやくシンプルで汚れた解決策ですが、それは私の仕事です。通常のHTMLファイル入力を作成し、CSSで非表示にするか、VueJSで非表示にします。隠しファイル入力にv-on:change
イベントを追加します。
<input id="fileInput" type="file" style="display:none" v-on:change="yourVueMethod()"/>
入力フィールドのクリックイベントをトリガーするボタンを作成します。
<button id="fileInputButton" onclick="document.getElementById('fileInput').click()">Open File</button>
これで、いつものように、あなたの方法で何でもできます。最高の解決策ではないかもしれませんが、やりやすいです。
このソリューションは、一部のブラウザではサポートされていない可能性があります。私たちはこれをやろうとしましたが、一部のブラウザではクリックに反応しませんでした。私が見た別の解決策は、あなたのボタン(好きなもの)を入れ、入力ファイルコントロールの上に置き、不透明度を0(CSS経由)に変更することです。それでもボタンはクリックに反応しますが、ユーザーには別のボタンをクリックしているようです。 –
'$ event'を属性に追加して、ハンドラの引数としてイベントを取得したいかもしれません: ' v-on:change = "yourVueMethod($ event)' –
[Vue.jsを使用してボタンにファイルをバインドする]の可能な複製(http://stackoverflow.com/questions/37535657/bind-file-input-to-a-button-using-vue-js) – oliverpool