vue-simple/lib/upload/index.js

Use Vue in the simplest and easiest way, contain more than one of plugins and other to do that, i hope you will like it.

import _Promise from 'babel-runtime/core-js/promise';
import FileSelector from './fileSelector';
import * as EventTypes from './events';
import FileOpenerBinder from './selector/opener';
import FileDraggerBinder from './selector/dragger';

var ReadType = {
  // 按字节读取文件内容，结果用ArrayBuffer对象表示
  ArrayBuffer: 'readAsArrayBuffer',
  // 按字节读取文件内容，结果为文件的二进制串
  BinaryString: 'readAsBinaryString',
  // 读取文件内容，结果用data:url的字符串形式表示
  DataURL: 'readAsDataURL',
  // 按字符读取文件内容，结果用字符串形式表示
  Text: 'readAsText'
};

/**
 * 异步读取图片数据为 base64
 * @param {File} rawFile
 * @param {String} [type]
 */
var readfile = function readfile(rawFile) {
  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ReadType.DataURL;
  return new _Promise(function (resolve, reject) {
    if (rawFile.toString() !== '[object File]') {
      console.warn('the file\'s type is error.');
      reject(rawFile);
    }

    var reader = null;

    var loadHandler = function loadHandler(event) {
      var fr = event.target || event.srcElement;

      if (event.type === 'load') {
        resolve(fr.result);

        fr.removeEventListener('load', loadHandler);
        // fr.removeEventListener('progress', loadHandler);
      } else if (event.type === 'error') {
        fr.abort();
        reject(event);
      }

      reader = null;
    };

    reader = new FileReader();
    reader[type](rawFile);
    reader.addEventListener('load', loadHandler);
    reader.addEventListener('error', loadHandler);
  });
};

export { readfile, ReadType, FileSelector, EventTypes, FileOpenerBinder, FileDraggerBinder };