add new doc

Author: JackPu

site/client/components/doc/cn/ResizeImage.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="components">
+    <h3>调整图片</h3>
+    <div class="center">
+      <div class="user">
+          <img class="avatar" :src="src"/>
+      </div>
+      <vue-core-image-upload
+         crop-ratio="1:1"
+         :class="['btn', 'btn-primary']"
+         resize="local"
+         url="http://101.198.151.190/api/upload.php"
+         extensions="png,jpeg,jpg"
+         text="Resize Image"
+         compress="20"
+         @imageuploaded="crpoServerImageUploaded">
+      </vue-core-image-upload>
+    </div>
+    <a  href="https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/site/client/components/doc/cn/CropImage.vue">View Code Source</a>
+  </div>
+</template>
+
+<script>
+import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue';
+export default {
+  components: {
+    VueCoreImageUpload
+  },
+  data() {
+    return {
+      src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
+      cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
+      cropArgs: {
+        toCropImgH: '?',
+        toCropImgW: '?',
+        toCropImgX: '?',
+        toCropImgY: '?'
+      }
+    };
+  },
+
+  methods: {
+    cropLocalImageUploaded(res) {
+      this.src = res.data.src;
+    },
+    crpoServerImageUploaded(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';
+      }
+    }
+  }
+};
+
+</script>

site/client/lib/constants.js

@@ -20,6 +20,10 @@ let routers = [
     name: 'Crop Image',
     cn_name: '裁剪图片'
   },
+  {
+    name: 'Resize Image',
+    cn_name: '调整图片'
+  },
   {
     name: 'Multiple File',
     cn_name: '上传多文件'

site/client/router/index.js

@@ -10,6 +10,7 @@ import CnEvents from '../components/doc/cn/Events.vue';
 import EnEvents from '../components/doc/en/Events.vue';
 import CnCropImage from '../components/doc/cn/CropImage.vue';
 import EnCropImage from '../components/doc/en/CropImage.vue';
+import CnResizeImage from '../components/doc/cn/ResizeImage.vue';
 import CnMultipleFile from '../components/doc/cn/MultipleFile.vue';
 import EnMultipleFile from '../components/doc/en/MultipleFile.vue';
 import CnCompressImage from '../components/doc/cn/CompressImage.vue';
@@ -69,6 +70,10 @@ export default new Router({
       path: '/en/crop-image',
       component: EnCropImage
     },
+    {
+      path: '/cn/resize-image',
+      component: CnResizeImage,
+    },
     {
       path: '/cn/multiple-file',
       component: CnMultipleFile

src/props.js

@@ -37,6 +37,17 @@ export default {
     type: String,
     default: '1:1'
   },
+  resize: {
+    type: [String, Boolean],
+    default: false,
+  },
+  ResizeBtn: {
+    type: Object,
+    default: return {
+      ok: 'Ok',
+      cancel: 'Cancel'
+    }
+  },
   maxFileSize:{
     type: Number,
     default: 1024 * 1024 * 100,

src/vue-core-image-upload.vue

@@ -15,6 +15,10 @@
           <button type="button" v-on:click="doCrop" class="btn btn-upload">{{cropBtn.ok}}</button>
           <button type="button" v-on:click="cancel()" class="btn btn-cancel">{{cropBtn.cancel}}</button>
         </p>
+        <p class="btn-groups">
+          <button type="button" v-on:click="doCrop" class="btn btn-upload">{{ResizeBtn.ok}}</button>
+          <button type="button" v-on:click="cancel()" class="btn btn-cancel">{{ResizeBtn.cancel}}</button>
+        </p>
       </div>
   </div>
 </div>
@@ -209,12 +213,12 @@
           for (let i=0;i<this.files.length;i++) {
             data.append(this.name, 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]);
-                }
-              }
+        }
+        if (typeof this.data === 'object') {
+          for(let k in this.data) {
+            if(this.data[k] !== undefined) {
+              data.append(k,this.data[k]);
+            }
           }
         }
         xhr('POST',this.url, this.headers, data, done, errorUpload, isBinary);