vue-six-four

vue 2.x.x component which generate base64 from a file Demo

Demo Umd

Install

npm install vue-six-four --save

Usage

import VueSixFour from 'vue-six-four';

or include the umd version in a script tag

<script src="https://unpkg.com/vue-six-four/dist/VueSixFour.umd.min.js"></script>

// Include as a component
{
  components: {
    VueSixFour,
    // if you are using the umd version
    // VueSixFour: window.VueSixFour,
  },
  methods: {
    getFileInfo(file) {
      console.log('File Information', file);
    },
  },
}

<vue-six-four v-on:vue-six-four="getFileInfo">

In this event you can get the information of the whole file.

{
	"lastModified": 1491695457000,
	"lastModifiedDate": "Sat Apr 08 2017 18:50:57 GMT-0500 (-05)",
	"name": "fileName.jpg",
	"size": "14361",
	"type": "image/jpeg",
	"sixFour": "really long base64 here"
}

Multiple Files

By default the component only allows to select one file, but you can change that using the allow-multiple prop.

<vue-six-four v-on:vue-six-four="getFileInfo" v-bind:allow-multiple="true">

The only difference is the event now return an array instead an object.

Build Setup

# install dependencies
npm install

# build component using poi
npm run component