diff --git a/src/lib/canvas-helper.js b/src/lib/canvas-helper.js
index 83f6d98..8138ae5 100644
--- a/src/lib/canvas-helper.js
+++ b/src/lib/canvas-helper.js
@@ -4,36 +4,40 @@
 **/
 
 export default {
-  _getImageType(str) {
+  _getImageType (str) {
     let mimeType = 'image/jpeg';
     const outputType = str.match(/(image\/[\w]+)\.*/)[0];
-    if (typeof outputType !== 'undefined'){
+    if (typeof outputType !== 'undefined') {
       mimeType = outputType;
     }
     return mimeType;
   },
-
   compress (src, quality, callback) {
-    const reader = new FileReader();
-    const self = this;
-    reader.onload = function(event) {
-      const image = new Image();
-      image.src = event.target.result;
-      image.onload = function() {
-        const mimeType = self._getImageType(src.type);
-        const cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
-        const ctx = cvs.getContext("2d").drawImage(image, 0, 0);
-        const newImageData = cvs.toDataURL(mimeType, quality/100);
-        callback(newImageData);
-      }
-    };
-    reader.readAsDataURL(src);
+    for (var i = 0; i < src.length; i++) {
+      const reader = new FileReader();
+      const self = this;
+      (function (file) {
+        reader.onload = (function (event) {
+          const image = new Image();
+          image.src = event.target.result;
+          image.onload = function () {
+            const mimeType = self._getImageType(file.type);
+            const cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
+            const ctx = cvs.getContext('2d').drawImage(image, 0, 0);
+            const newImageData = cvs.toDataURL(mimeType, quality / 100);
+            file['base64Code'] = newImageData;
+            callback(file);
+          }
+        })
+      })(src[i])
+      reader.readAsDataURL(src[i]);
+    }
   },
   /**
   * crop image via canvas and generate data
   **/
-  crop(image, options, callback) {
-    const checkNumber = function(num) {
+  crop (image, options, callback) {
+    const checkNumber = function (num) {
       return (typeof num === 'number');
     };
     // check crop options
@@ -43,7 +47,7 @@ export default {
         options.toCropImgH > 0) {
       let w = options.toCropImgW;
       let h = options.toCropImgH;
-      if(options.maxWidth && options.maxWidth < w) {
+      if (options.maxWidth && options.maxWidth < w) {
         w = options.maxWidth;
         h = options.toCropImgH * w / options.toCropImgW;
       }
@@ -51,71 +55,67 @@ export default {
         h = options.maxHeight
       }
       const cvs = this._getCanvas(w, h);
-      const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0 , 0, w, h);
+      const ctx = cvs.getContext('2d').drawImage(image, options.toCropImgX, options.toCropImgY, options.toCropImgW, options.toCropImgH, 0, 0, w, h);
       const mimeType = this._getImageType(image.src);
-      const data = cvs.toDataURL(mimeType, options.compress/100);
+      const data = cvs.toDataURL(mimeType, options.compress / 100);
       callback(data);
     }
   },
-
   /**
   * init image for reset size and rotation
   **/
-  init(src, callback) {
+  init (src, callback) {
       let image = new Image();
       image.src = src;
       var self = this;
-      image.onload = function() {
+      image.onload = function () {
         var mimeType = self._getImageType(image.src);
         var cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
-        var ctx = cvs.getContext("2d");
+        var ctx = cvs.getContext('2d');
         ctx.drawImage(image, 0, 0);
         var newImageData = cvs.toDataURL(mimeType, 100);
         callback(newImageData);
       }
   },
-
   /**
   * rotate image via canvas
   **/
-  rotate(imageData, direction, callback) {
+  rotate (imageData, direction, callback) {
       let image = new Image();
       image.src = imageData.src;
       var self = this;
-      image.onload = function() {
+      image.onload = function () {
         var mimeType = self._getImageType(image.src);
         var cvs = self._getCanvas(image.naturalHeight, image.naturalWidth);
-        var ctx = cvs.getContext("2d");
-        if (direction == 1) {
-            ctx.rotate(90 * Math.PI / 180);
-            ctx.translate(0, -cvs.width);
+        var ctx = cvs.getContext('2d');
+        if (direction === 1) {
+          ctx.rotate(90 * Math.PI / 180);
+          ctx.translate(0, -cvs.width);
         } else {
-            ctx.rotate(-90 * Math.PI / 180);
-            ctx.translate(-cvs.height, 0);
+          ctx.rotate(-90 * Math.PI / 180);
+          ctx.translate(-cvs.height, 0);
         }
         ctx.drawImage(image, 0, 0);
         var newImageData = cvs.toDataURL(mimeType, 100);
         callback(newImageData);
       }
   },
-
-  resize(image, options, callback) {
-    const checkNumber = function(num) {
+  resize (image, options, callback) {
+    const checkNumber = function (num) {
       return (typeof num === 'number');
     };
     if (checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
-      const w = options.toCropImgW  * options.imgChangeRatio;
+      const w = options.toCropImgW * options.imgChangeRatio;
       const h = options.toCropImgH * options.imgChangeRatio;
       const cvs = this._getCanvas(w, h);
-      const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0, 0, w , h);
+      const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0, 0, w, h);
       const mimeType = this._getImageType(image.src);
       const data = cvs.toDataURL(mimeType, options.compress / 100);
       callback(data);
     }
   },
-
-  rotate2(src, degrees, callback) {
-    this._loadImage(src, (image) => {
+  rotate2 (src, degrees, callback) {
+    this._loadImage(src, image => {
       let w = image.naturalWidth;
       let h = image.naturalHeight;
       const canvasWidth = Math.max(w, h);
@@ -152,8 +152,7 @@ export default {
       callback(data, w, h);
     });
   },
-
-  _loadImage(data, callback) {
+  _loadImage (data, callback) {
     const image = new Image();
     image.src = data;
     image.onload = function () {
@@ -163,12 +162,10 @@ export default {
       console.log('Error: image error!');
     };
   },
-
-  _getCanvas(width, height) {
+  _getCanvas (width, height) {
     const canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
     return canvas;
-  },
-
+  }
 };
diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue
index e0e43a3..8187cde 100644
--- a/src/vue-core-image-upload.vue
+++ b/src/vue-core-image-upload.vue
@@ -117,8 +117,8 @@
           return;
         }
         this. __dispatch('imagechanged', this.files.length > 1 ? this.files : this.files[0]);
-        if (this.compress && this.files[0]['type'] !== 'image/png' && this.files[0]['type'] !== 'image/gif') {
-          canvasHelper.compress(this.files[0], 100 - this.compress, (code) => {
+        if (this.compress) {
+          canvasHelper.compress(this.files, 100 - this.compress, (code) => {
             this.tryAjaxUpload('', true, code);
           });
         } else {
@@ -276,11 +276,14 @@
         }
         let data;
         if (isBinary) {
+          var dataType = base64Code['type'] ? base64Code['type'] : this.files[0]['type'];
+          var dataName = base64Code['name'] ? encodeURI(base64Code['name']) : this.files[0]['name'];
+          var code = base64Code['base64Code'] ? base64Code['base64Code'] : base64Code;
           data = {
-            type: this.files[0]['type'],
-            filename: this.files[0]['name'],
+            type: dataType,
+            filename: dataName,
             filed: this.inputOfFile,
-            base64Code: base64Code
+            base64Code: code
           };
           if (typeof this.data === 'object') {
             data = Object.assign(this.data, data);