Vue.jsで画像プレビュー機能を実装 - Qiita
はじめに 以前Laravel + AWS S3を用いて、画像アップロード機能を実装しました。 その際、プロフィール画像の変更時に画像のプレビューが見れたらいいなと思いましたので今回はプレビュー機能を実装していきます。 せっかくなので、Vue.jsで実装してみようと思います。まだVue.jsはほぼ知識がないので勉強しながら実装していきます。 バージョン ・Laravel：7.20.0 ・Vue.js 2.5.17 流れ 大まかな流れは以下の通り Vueファイルの作成 処理の実装 コンポーネントの登録 開発 まずは、プレビュー用のVueファイルを作成します。 resources/js/components配下で新規作成します。 処理はこちらになります。 <template> <div> <div> <input type="file" name="avatar" ref="preview" v
【Vue.js + (laravel)】画像データをPOSTしたい - Qiita
Vue.jsで画像データをPOSTしたかったのでformDataを使って実現しました 【画面側】 type="file" の入力欄と送信ボタンを用意 画像の選択(input)が行われたとき、送信ボタンが押されたときにそれぞれ処理を行う <template> <input @change="fileSelect" type="file" name="file"> <button @click="upload" type="submit">送信</button> </template> <script> export default { name: "TestView", data: function () { return { selected_file: null } }, methods: { //ファイル選択時の処理 fileSelect: function(e) { //選択したファ
大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
