Vue-picture-inputを使用したVue.jsアプリでの画像のアップロード
ファイルと画像のアップロードは、多くの重要なアプリにとって必須の機能です。 幸運なことに、vue-picture-inputを使用してVueアプリで簡単にセットアップできます。
独自のカスタムファイルセレクター入力を作成する場合は、この投稿を確認してください。
インストール
npmまたはYarnを介してvue-picture-inputをインストールします。
$ npm install --save vue-picture-input # or: $ yarn add vue-picture-input
使用法
vue-picture-input ライブラリは、さまざまな使用法を可能にし、非常に簡単に使用できます。
<template> <picture-input <!--Props go here--> ></picture-input> </template>
これから使用するいくつかの小道具を次に示します。
- ref :base64画像文字列にアクセスするためにこれが必要になります
- width 、 height :コンポーネントの幅と高さを指定します
- accept :受け入れられるファイルタイプを制限するために使用されます
- 取り外し可能:コンポーネントをリセットできるかどうかを指定します
さらに、コンポーネントは次のイベントを発行します。
- 削除済み:画像がコンポーネントから切り離されたときに出力されます
- changed :選択した画像が変更されたときに発行されます(つまり、 再選択)
ファイル入力のコードは次のようになります。
index.vue
<picture-input ref="pictureInput" @change="onChanged" @remove="onRemoved" :width="500" :removable="true" removeButtonClass="ui red button" :height="500" accept="image/jpeg, image/png, image/gif" buttonClass="ui button primary" :customStrings="{ upload: '<h1>Upload it!</h1>', drag: 'Drag and drop your image here'}"> </picture-input>
選択した画像をバックエンドにアップロードできるボタンを追加しましょう。
基本的に、クリックするとattemptUpload メソッドを呼び出し、disabled
クラスバインディングを持ちます。 選択した画像がある場合にのみ有効になります。
<button @click="attemptUpload" v-bind:class="{ disabled: !image }"> Upload </button>
次に、Axiosを使用してネットワークリクエストを行います。 また、 Formdata API を活用して、画像データを投稿するための優れた構成を作成します。
upload.js
import axios from 'axios'; export default function (url, file, name = 'avatar') { if (typeof url !== 'string') { throw new TypeError(`Expected a string, got ${typeof url}`); } // You can add checks to ensure the url is valid, if you wish const formData = new FormData(); formData.append(name, file); const config = { headers: { 'content-type': 'multipart/form-data' } }; return axios.post(url, formData, config); };
上記のコードは、最初のパラメーターとしてurlを受け入れ、2番目のパラメーターとしてfileオブジェクトを受け入れ、promiseを返します。 また、ヘッダーの content-typeをmultipart/formdata
に設定して、バックエンドAPIがパイプの内容を認識できるようにします。
したがって、上記のコードを次のように使用できます。
import FormDataPost from '/upload'; //... FormDataPost('http://localhost:8001/user/picture', image) .then(response=>{ console.log("Uploaded picture successfully"); }) .catch(err=>{ console.error(err); }); //...
onChanged 、 onRemoved 、およびattemptUploadメソッドは次のようになります。
//... methods: { onChanged() { console.log("New picture loaded"); if (this.$refs.pictureInput.file) { this.image = this.$refs.pictureInput.file; } else { console.log("Old browser. No support for Filereader API"); } }, onRemoved() { this.image = ''; }, attemptUpload() { if (this.image){ FormDataPost('http://localhost:8001/user/picture', this.image) .then(response=>{ if (response.data.success){ this.image = ''; console.log("Image uploaded successfully ✨"); } }) .catch(err=>{ console.error(err); }); } } } //...
💪完了! 画像のアップロードはフロントエンドで機能しています。 Expressを使用してNode.jsバックエンドでこれを設定する方法については、Read-onを参照してください。