vue-picture-inputを使用したVue.jsアプリでの画像のアップロード

投稿日: 2022-04-20 2022-10-10
タグ: 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を参照してください。

getdocs

13036