JavaScript
promise
cloudinary
vue.js
axios

Vue.jsアプリでCloudinaryに画像をアップロードする

Vue.jsを使用したアプリ内でCloudinaryにファイルをアップロードしたかったのですが、公式ドキュメントでなかなか良いものが見つけられない中、公式ブログでいい感じの記事があったので紹介させていただきます。
ということで、本投稿では、Vue.jsを使ったwebアプリでCloudinaryに画像ファイルをUploadする方法を書いていきます。
実際の公式ブログそのままのコードだと、Vue.jsのエラーが出たりするので、若干修正したり無駄なもの(Bootstrapのクラス使用とか)は省いています。

vue-cloudinaryなるライブラリを見つけたのですが、こちらはCloudinaryからデータを引っ張ってくるだけのようです。)

Cloudinaryとは

Cloudinary自体については、Web、モバイル開発者のための画像管理クラウドサービスCloudinaryが超便利な件あたりを見てもらえればと思います。

ちなみにサイト表示が爆速すぎて話題になったdev.toもCloudinaryを使っています。

開発環境準備

vue プロジェクト作成
自分は基本vue-cliを使って開発するので、本記事もそのようにさせていただきます。なお今回はvue routerは使用しません。

$ vue init webpack vue-cloudinary-upload

axiosインストール
Cloudinary APIを実行する際に使用します。

Promise based HTTP client for the browser and node.js

Githubに書いてあるとおり、PromiseベースのイケてるHTTPクライアントです。

$ npm i axios --save

コーディング

HTML

ファイルをアプロードするためのインプットタグを設置します。

App.vue
<template>
  <div id="app">
    <input type="file" v-on:change="upload($event.target.files)" accept="image/*" />
  </div>
</template>

JavaScript

コード内でaxiosを使用するため、インポートする

App.vue
import axios from 'axios'

Cloudinaryのconfig情報設定

App.vue
  data() {
    return {
      cloudinary: {
        uploadPreset: '<UPLOAD-PRESET>',
        apiKey: '<API-KEY>',
        cloudName: '<CLOUD-NAME>'
      }
    }
  }

apiKeyとcloudNameはDashboardで確認できます。uploadPresetはここで設定するとPreset IDが発行されます。
cloudinary-preset.png

CloudinaryのAPI URLを返すメソッドを定義

App.vue
  computed: {
    clUrl: function() {
      return `https://api.cloudinary.com/v1_1/${this.cloudinary.cloudName}/upload`
    }
  }

ファイルアップロードメソッド定義
最後は、HTMLのインプットタグにファイルが選択されたタイミングで発動する、Cloudinaryへ実際に画像をアップロードするメソッドを定義します。

App.vue
  methods: {
    upload: function(file) {
      const formData = new FormData()
      formData.append('file', file[0]);
      formData.append('upload_preset', this.cloudinary.uploadPreset);
      formData.append('tags', 'gs-vue,gs-vue-uploaded');
      // For debug purpose only
      // Inspects the content of formData
      for(var pair of formData.entries()) {
        console.log(pair[0]+', '+pair[1]);
      }
      // Execute api
      axios.post(this.clUrl, formData).then(res => {
        console.log('Success!!');
      })
    }
  }

引数fileは、下記コードで渡される$event.target.filesになります。

<input type="file" v-on:change="upload($event.target.files)" accept="image/*" />

まずはFormDataオブジェクトに、Cloudinary APIを実行するときに送信するデータをセットします。

そして、APIを実行(ファイルアップロード)の流れです。

       axios.post(this.clUrl, formData).then(res => {
        console.log('Success!!');
      })

総括

全体コード

App.vue
<template>
  <div id="app">
    <input type="file" v-on:change="upload($event.target.files)" accept="image/*" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  data() {
    return {
      cloudinary: {
        uploadPreset: '<UPLOAD-PRESET>',
        apiKey: '<API-KEY>',
        cloudName: '<CLOUD-NAME>'
      }
    }
  },
  computed: {
    clUrl: function() {
      return `https://api.cloudinary.com/v1_1/${this.cloudinary.cloudName}/upload`
    }
  },
  methods: {
    upload: function(file) {
      const formData = new FormData()
      formData.append('file', file[0]);
      formData.append('upload_preset', this.cloudinary.uploadPreset);
      formData.append('tags', 'gs-vue,gs-vue-uploaded');
      // For debug purpose only
      // Inspects the content of formData
      for(var pair of formData.entries()) {
        console.log(pair[0]+', '+pair[1]);
      }
      // Execute api
      axios.post(this.clUrl, formData).then(res => {
        console.log('Success!!');
      })
    }
  }
}
</script>

<style>
</style>
$ npm run dev

を実行して実際にブラウザで動かし、Success!!がコンソールに表示されれば成功です!
console.png
CloudinaryのMedia Libraryを見てみましょう。選択した画像ファイルがCloudinary上にアップロードされているのが確認できます。

参考リンク