Vue.jsにおいて、画像のアップロードとダウンロードはさまざまな方法で実現できます。以下では、それぞれの基本的なアプローチについて説明します。

画像アップロード

1. HTML <input type="file"> 要素を使用する

これは最も基本的な方法であり、ファイル入力フィールドを利用してユーザーがアップロードしたい画像を選択できるようにします。

<template>
  <div>
    <input type="file" @change="onFileSelected" />
    <button @click="sendImage">画像送信</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    onFileSelected(event) {
      this.selectedFile = event.target.files[0];
    },
    async sendImage() {
      if (!this.selectedFile) {
        alert('ファイルを選択してください');
        return;
      }

      const formData = new FormData();
      formData.append('image', this.selectedFile);

      try {
        const result = await fetch('/api/upload', {
          method: 'POST',
          body: formData
        });

        if (result.ok) {
          const message = await result.json();
          console.log('アップロード完了:', message);
        } else {
          console.error('アップロードエラー:', result.statusText);
        }
      } catch (error) {
        console.error('通信エラー:', error);
      }
    }
  }
};
</script>

この例では：

• onFileSelected メソッドがファイル選択イベントを処理し、選択されたファイルを selectedFile データ属性に保存します。
• sendImage メソッドは fetch を使用して POST リクエストを送り、ファイルをサーバーにアップロードします。

2. 第三-partyライブラリを使用する

より複雑な要件には、HTTPリクエストを簡略化するための第三-partyライブラリ（例：axios）を使用できます。

まず、axiosをインストールします：

npm install axios

次に、コンポーネント内で以下のように使用します：

<template>
  <div>
    <input type="file" @change="onFileSelected" />
    <button @click="sendImage">画像送信</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    onFileSelected(event) {
      this.selectedFile = event.target.files[0];
    },
    async sendImage() {
      if (!this.selectedFile) {
        alert('ファイルを選択してください');
        return;
      }

      const formData = new FormData();
      formData.append('image', this.selectedFile);

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        });

        console.log('アップロード完了:', response.data);
      } catch (error) {
        console.error('アップロード失敗:', error);
      }
    }
  }
};
</script>

画像ダウンロード

1. サーバーから提供されるダウンロードリンクを使用する

サーバーがダウンロード用のリンクを提供している場合、そのリンクをブラウザで開くことで画像をダウンロードできます。

<template>
  <div>
    <a :href="downloadLink" download="image.jpg">画像をダウンロード</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downloadLink: '/api/download'
    };
  }
};
</script>

この例では、<a> タグの href 属性が downloadLink にバインドされており、ユーザーがリンクをクリックすると画像がダウンロードされます。

2. 前端でBlobを生成してダウンロードする

サーバーから画像データを取得し、それをフロントエンドでBlobとして生成してダウンロードする必要がある場合、fetchやaxiosを使用して画像データを取得し、Blobオブジェクトを作成できます。

<template>
  <div>
    <button @click="getImage">画像をダウンロード</button>
  </div>
</template>

<script>
export default {
  methods: {
    async getImage() {
      try {
        const response = await fetch('/api/download');
        const imageData = await response.blob();

        const tempUrl = window.URL.createObjectURL(imageData);
        const anchorElement = document.createElement('a');
        anchorElement.href = tempUrl;
        anchorElement.download = 'image.jpg';
        anchorElement.click();
        window.URL.revokeObjectURL(tempUrl);
      } catch (error) {
        console.error('ダウンロード失敗:', error);
      }
    }
  }
};
</script>

この例では：

• getImage メソッドは fetch を使用して画像データを取得し、それを Blob オブジェクトに変換します。
• 一時的な <a> 要素を作成し、その href 属性を Blob URL に設定してクリックイベントをシミュレートすることでダウンロードをトリガーします。
• 最後に、Blob URL を解放してメモリリークを防ぎます。

以上がVue.jsで画像のアップロードとダウンロードを行う基本的な方法です。実際のニーズに基づいて適切な方法を選択してください。