add new feature

Author: JackPu

.eslintrc.json

@@ -1,17 +1,23 @@
 {
  "extends": "airbnb-base",
  "plugins": [
- "import"
+ "import",
+ "vue"
  ],
  "globals": {
- "XMLHttpRequest": 1
+ "XMLHttpRequest": 1,
+ "FormData": 1,
+ "File": 1,
+ "Blob": 1
  },
  "rules": {
  "func-names": 0,
  "prefer-template": 0,
  "dot-notation": 0,
  "radix": 0,
  "no-mixed-operators": 0,
+ "no-param-reassign": 0,
+ "no-console": 0,
  "comma-dangle": 0
  }
 }

README.md

@@ -91,6 +91,7 @@ Use CDN Script(ES5)
 | maxWidth | Number | 150 | limit the width of your image you cropped|
 | maxheight | Number | 150 | limit the height of your image you cropped|
 | inputAccept | string | 'image/*' / 'image/jpg,image/jpeg,image/png' | the image file of accept type |
+| isXhr | Boolean | true | cancel default xhr uploading 
 
 ### $dispatch, events
 
@@ -102,6 +103,10 @@ imageuploaded(res) {
 
  }
 }
+// return file object
+imagechanged(res) {
+ console.log(res.name)
+}
 
 
 // uploading image

demo/demo.min.js

@@ -26,6 +26,7 @@
  "eslint-plugin-promise": "^3.4.0",
  "eslint-plugin-react": "^6.9.0",
  "eslint-plugin-standard": "^2.0.1",
+ "eslint-plugin-vue": "^2.0.1",
  "style-loader": "^0.13.1",
  "vue-html-loader": "^1.2.3",
  "vue-loader": "^8.5.4",

index.js

@@ -0,0 +1,44 @@
+import Vue from 'vue/dist/vue';
+
+const VueCoreImageUpload = require('../index');
+
+Vue.config.silent = false;
+
+Vue.config.devtools = false;
+
+new Vue({
+ el: '#app',
+ components: {
+ 'vue-core-image-upload': VueCoreImageUpload
+ },
+ data: {
+ name: 'Jiraiya',
+ src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
+ cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
+ cropArgs: {},
+ },
+ methods: {
+ imageuploaded(res) {
+ if (res.errcode === 0) {
+ if (res.data.src) {
+ this.src = res.data.src;
+ return;
+ }
+ this.name = res.data.name;
+ this.cropArgs = {
+ toCropImgH: parseInt(res.data.post.toCropImgH),
+ toCropImgW: parseInt(res.data.post.toCropImgW),
+ toCropImgX: parseInt(res.data.post.toCropImgX),
+ toCropImgY: parseInt(res.data.post.toCropImgY)
+ }
+ this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png'; 
+ }
+ },
+ imagechanged(res) {
+ console.log(res); 
+ },
+ errorhandle: function(msg) {
+ console.warn(msg);
+ }
+ }
+});

package.json

@@ -1,9 +1,9 @@
 /**
  * simple ajax handler
  **/
-module.exports = function (method, url, headers, data, callback, error) {
+module.exports = function (method, url, headers, data, callback, err) {
  const r = new XMLHttpRequest();
- let error = error || function () {
+ const error = err || function () {
  console.error('AJAX ERROR!');
  };
  // Binary?
@@ -14,29 +14,29 @@ module.exports = function (method, url, headers, data, callback, error) {
  }
  method = method.toUpperCase();
  // Xhr.responseType 'json' is not supported in any of the vendors yet.
- r.onload = function (e) {
- var json = r.response;
+ r.onload = function () {
+ let json = r.response;
  try {
  json = JSON.parse(r.responseText);
- }
- catch (_e) {
+ } catch (_e) {
  if (r.status === 401) {
  json = error('access_denied', r.statusText);
  }
  }
- var headers = headersToJSON(r.getAllResponseHeaders());
+ let headers = headersToJSON(r.getAllResponseHeaders());
  headers.statusCode = r.status;
  callback(json || (method === 'GET' ? error('empty_response', 'Could not get resource') : {}), headers);
  };
- r.onerror = function (e) {
- var json = r.responseText;
+ r.onerror = function () {
+ let json = r.responseText;
  try {
  json = JSON.parse(r.responseText);
+ } catch (_e) {
+ console.error(_e);
  }
- catch (_e) {}
  callback(json || error('access_denied', 'Could not get resource'));
  };
- var x;
+ let x;
  // Should we add the query to the URL?
  if (method === 'GET' || method === 'DELETE') {
  data = null;
@@ -80,12 +80,12 @@ module.exports = function (method, url, headers, data, callback, error) {
  return r;
  // Headers are returned as a string
  function headersToJSON(s) {
- const r = {};
+ const o = {};
  const reg = /([a-z\-]+):\s?(.*);?/gi;
  let m;
  while (m = reg.exec(s)) {
- r[m[1]] = m[2];
+ o[m[1]] = m[2];
  }
- return r;
+ return o;
  }
 };

src/demo/index.js

@@ -225,6 +225,7 @@
  
  import Drag from './lib/drag';
  import Resize from './lib/resize';
+ import xhr from './lib/xhr';
  
  const GIF_LOADING_SRC = 'data:image/gif;base64,R0lGODlhGAAYAPQAAP///3FxcePj4/v7++3t7dLS0vHx8b+/v+Dg4MfHx+jo6M7Oztvb2/f397Kysru7u9fX16qqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJBwAAACwAAAAAGAAYAAAFriAgjiQAQWVaDgr5POSgkoTDjFE0NoQ8iw8HQZQTDQjDn4jhSABhAAOhoTqSDg7qSUQwxEaEwwFhXHhHgzOA1xshxAnfTzotGRaHglJqkJcaVEqCgyoCBQkJBQKDDXQGDYaIioyOgYSXA36XIgYMBWRzXZoKBQUMmil0lgalLSIClgBpO0g+s26nUWddXyoEDIsACq5SsTMMDIECwUdJPw0Mzsu0qHYkw72bBmozIQAh+QQJBwAAACwAAAAAGAAYAAAFsCAgjiTAMGVaDgR5HKQwqKNxIKPjjFCk0KNXC6ATKSI7oAhxWIhezwhENTCQEoeGCdWIPEgzESGxEIgGBWstEW4QCGGAIJEoxGmGt5ZkgCRQQHkGd2CESoeIIwoMBQUMP4cNeQQGDYuNj4iSb5WJnmeGng0CDGaBlIQEJziHk3sABidDAHBgagButSKvAAoyuHuUYHgCkAZqebw0AgLBQyyzNKO3byNuoSS8x8OfwIchACH5BAkHAAAALAAAAAAYABgAAAW4ICCOJIAgZVoOBJkkpDKoo5EI43GMjNPSokXCINKJCI4HcCRIQEQvqIOhGhBHhUTDhGo4diOZyFAoKEQDxra2mAEgjghOpCgz3LTBIxJ5kgwMBShACREHZ1V4Kg1rS44pBAgMDAg/Sw0GBAQGDZGTlY+YmpyPpSQDiqYiDQoCliqZBqkGAgKIS5kEjQ21VwCyp76dBHiNvz+MR74AqSOdVwbQuo+abppo10ssjdkAnc0rf8vgl8YqIQAh+QQJBwAAACwAAAAAGAAYAAAFrCAgjiQgCGVaDgZZFCQxqKNRKGOSjMjR0qLXTyciHA7AkaLACMIAiwOC1iAxCrMToHHYjWQiA4NBEA0Q1RpWxHg4cMXxNDk4OBxNUkPAQAEXDgllKgMzQA1pSYopBgonCj9JEA8REQ8QjY+RQJOVl4ugoYssBJuMpYYjDQSliwasiQOwNakALKqsqbWvIohFm7V6rQAGP6+JQLlFg7KDQLKJrLjBKbvAor3IKiEAIfkECQcAAAAsAAAAABgAGAAABbUgII4koChlmhokw5DEoI4NQ4xFMQoJO4uuhignMiQWvxGBIQC+AJBEUyUcIRiyE6CR0CllW4HABxBURTUw4nC4FcWo5CDBRpQaCoF7VjgsyCUDYDMNZ0mHdwYEBAaGMwwHDg4HDA2KjI4qkJKUiJ6faJkiA4qAKQkRB3E0i6YpAw8RERAjA4tnBoMApCMQDhFTuySKoSKMJAq6rD4GzASiJYtgi6PUcs9Kew0xh7rNJMqIhYchACH5BAkHAAAALAAAAAAYABgAAAW0ICCOJEAQZZo2JIKQxqCOjWCMDDMqxT2LAgELkBMZCoXfyCBQiFwiRsGpku0EshNgUNAtrYPT0GQVNRBWwSKBMp98P24iISgNDAS4ipGA6JUpA2WAhDR4eWM/CAkHBwkIDYcGiTOLjY+FmZkNlCN3eUoLDmwlDW+AAwcODl5bYl8wCVYMDw5UWzBtnAANEQ8kBIM0oAAGPgcREIQnVloAChEOqARjzgAQEbczg8YkWJq8nSUhACH5BAkHAAAALAAAAAAYABgAAAWtICCOJGAYZZoOpKKQqDoORDMKwkgwtiwSBBYAJ2owGL5RgxBziQQMgkwoMkhNqAEDARPSaiMDFdDIiRSFQowMXE8Z6RdpYHWnEAWGPVkajPmARVZMPUkCBQkJBQINgwaFPoeJi4GVlQ2Qc3VJBQcLV0ptfAMJBwdcIl+FYjALQgimoGNWIhAQZA4HXSpLMQ8PIgkOSHxAQhERPw7ASTSFyCMMDqBTJL8tf3y2fCEAIfkECQcAAAAsAAAAABgAGAAABa8gII4k0DRlmg6kYZCoOg5EDBDEaAi2jLO3nEkgkMEIL4BLpBAkVy3hCTAQKGAznM0AFNFGBAbj2cA9jQixcGZAGgECBu/9HnTp+FGjjezJFAwFBQwKe2Z+KoCChHmNjVMqA21nKQwJEJRlbnUFCQlFXlpeCWcGBUACCwlrdw8RKGImBwktdyMQEQciB7oACwcIeA4RVwAODiIGvHQKERAjxyMIB5QlVSTLYLZ0sW8hACH5BAkHAAAALAAAAAAYABgAAAW0ICCOJNA0ZZoOpGGQrDoOBCoSxNgQsQzgMZyIlvOJdi+AS2SoyXrK4umWPM5wNiV0UDUIBNkdoepTfMkA7thIECiyRtUAGq8fm2O4jIBgMBA1eAZ6Knx+gHaJR4QwdCMKBxEJRggFDGgQEREPjjAMBQUKIwIRDhBDC2QNDDEKoEkDoiMHDigICGkJBS2dDA6TAAnAEAkCdQ8ORQcHTAkLcQQODLPMIgIJaCWxJMIkPIoAt3EhACH5BAkHAAAALAAAAAAYABgAAAWtICCOJNA0ZZoOpGGQrDoOBCoSxNgQsQzgMZyIlvOJdi+AS2SoyXrK4umWHM5wNiV0UN3xdLiqr+mENcWpM9TIbrsBkEck8oC0DQqBQGGIz+t3eXtob0ZTPgNrIwQJDgtGAgwCWSIMDg4HiiUIDAxFAAoODwxDBWINCEGdSTQkCQcoegADBaQ6MggHjwAFBZUFCm0HB0kJCUy9bAYHCCPGIwqmRq0jySMGmj6yRiEAIfkECQcAAAAsAAAAABgAGAAABbIgII4k0DRlmg6kYZCsOg4EKhLE2BCxDOAxnIiW84l2L4BLZKipBopW8XRLDkeCiAMyMvQAA+uON4JEIo+vqukkKQ6RhLHplVGN+LyKcXA4Dgx5DWwGDXx+gIKENnqNdzIDaiMECwcFRgQCCowiCAcHCZIlCgICVgSfCEMMnA0CXaU2YSQFoQAKUQMMqjoyAglcAAyBAAIMRUYLCUkFlybDeAYJryLNk6xGNCTQXY0juHghACH5BAkHAAAALAAAAAAYABgAAAWzICCOJNA0ZVoOAmkY5KCSSgSNBDE2hDyLjohClBMNij8RJHIQvZwEVOpIekRQJyJs5AMoHA+GMbE1lnm9EcPhOHRnhpwUl3AsknHDm5RN+v8qCAkHBwkIfw1xBAYNgoSGiIqMgJQifZUjBhAJYj95ewIJCQV7KYpzBAkLLQADCHOtOpY5PgNlAAykAEUsQ1wzCgWdCIdeArczBQVbDJ0NAqyeBb64nQAGArBTt8R8mLuyPyEAOwAAAAAAAAAAAA==';
  
@@ -282,7 +283,11 @@
  },
  inputAccept:{
  type: String,
- default: 'image/*'
+ default: 'image/jpg,image/jpeg,image/png'
+ },
+ isXhr: {
+ type: Boolean,
+ default: true
  }
  },
  data() {
@@ -301,7 +306,6 @@
  },
  
  methods: {
- 
  __dispatch(name,res) {
  this.$emit && this.$emit(name, res);
  },
@@ -340,6 +344,7 @@
  return;
  
  }
+ this. __dispatch('imagechanged',this.files[0]);
  this.tryAjaxUpload(); 
  
  },
@@ -362,7 +367,7 @@
  reader.readAsDataURL(this.files[0]);
  },
  
- // 对图像进行处理
+ // set the image size
  __initImage(src) {
  let pic = new Image();
  let self = this;
@@ -456,14 +461,20 @@
  
  // use ajax upload IE9+ 
  tryAjaxUpload(callback) {
- let self = this;
+ this. __dispatch('imageuploading',this.files[0]);
+ if (!this.isXhr) {
+ if(this.crop) {
+ this.hasImage = false;
+ } 
+ return typeof callback === 'function' && callback(); 
+ }
+ const self = this;
  let data = new FormData();
  for(let i=0;i<this.files.length;i++) { 
  data.append(self.inputOfFile, this.files[i]); 
  }
  
  if (typeof this.data === 'object') { 
- 
  for(let k in this.data) {
  if(this.data[k] !== undefined) {
  data.append(k,this.data[k]);
@@ -472,7 +483,7 @@
  } 
 
  }
- this. __dispatch('imageuploading',this.files);
+ 
  xhr('POST',this.url,{},data,function(res) {
  if(typeof callback === 'function') {
  callback();

src/lib/xhr.js

@@ -1,13 +1,13 @@
-const webpack = require( 'webpack' )
+const webpack = require('webpack');
 
 module.exports = {
- entry: './src/demo.js',
+ entry: './src/demo/index.js',
  output: {
  path: './demo',
  filename: 'demo.min.js',
  },
  resolve: {
- extensions: [ '','.js', '.vue' ]
+ extensions: ['', '.js', '.vue']
  },
  module: {
  loaders: [
@@ -33,8 +33,8 @@ module.exports = {
  },
  plugins: [
  new webpack.optimize.UglifyJsPlugin( {
- minimize : true,
- sourceMap : false,
+ minimize: true,
+ sourceMap: false,
  mangle: true,
  compress: {
  warnings: false