裁剪

src/components/common/uploadCmpt.vue

 <template>
     <div>
-        <div :class="this.$i18n.locale=='zh-CN'?'uploadCmptZh':'uploadCmptEn'">
-            <img :src="imgDataUrl" width="130" height="130" v-if='this.imgDataUrl!=""'/>
+        <div :class="this.$i18n.locale=='zh-CN'?'uploadCmptZh':'uploadCmptEn'" v-if="!imgDataUrl">
+            <img :src="imgDataUrl" width="129" height="129" v-if='this.imgDataUrl!=""'/>
+            <a class="uploadClick" @click="toggleShow"></a>
+        </div>
+        <div class="imgDataUrl" v-if="imgDataUrl">
+            <img :src="imgDataUrl" width="128" height="128" v-if='this.imgDataUrl!=""'/>
             <a class="uploadClick" @click="toggleShow"></a>
         </div>
         <my-upload field="fileUpload"
@@ -10,10 +14,10 @@
                    @crop-upload-success="cropUploadSuccess"
                    @crop-upload-fail="cropUploadFail"
                    v-model="show"
-                   :width="130"
+                   :width="128"
                    :maxSize="2"
                    ref="uploadCmpt"
-                   :height="130"
+                   :height="128"
                    :params="params"
                    :noRotate='false'
                    :url="upload_Url"
@@ -110,42 +114,39 @@
 <style scoped="scoped" lang="scss">
     .uploadCmptZh{
         position: relative;
-        width:130px;
-        height:130px;
+        width:128px;
+        height:128px;
         background: url(../../assets/img/uploadZh.png) no-repeat;
         background-size: cover;
         border-radius: 6px;
-
-        img{
-            border: 1px solid #c0ccda;
-            border-radius: 6px;
-
-        }
         &:hover{
             border: 1px dashed #5d78ff;
-            background-size: 105%;
+            background-size: 102%;
             background-position: center;
         }
     }
     .uploadCmptEn{
         position: relative;
-        width:130px;
-        height:130px;
+        width:128px;
+        height:128px;
         background: url(../../assets/img/uploadEn.png) no-repeat;
         background-size: cover;
         border-radius: 6px;
+        &:hover{
+            border: 1px dashed #5d78ff;
+            background-size: 102%;
+            background-position: center;
+        }
+    }
+    .imgDataUrl{
         img{
             border: 1px solid #c0ccda;
             border-radius: 6px;
-
-        }
-        &:hover{
-            border: 1px dashed #5d78ff;
         }
     }
     .uploadClick{
-        width:130px;
-        height:130px;
+        width:128px;
+        height:128px;
         display: block;
         overflow: hidden;
         position: absolute;

src/components/vue-image-crop-upload/utils/language.js

@@ -5,7 +5,7 @@ export default {
 		noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
 		success: '上传成功',
 		fail: '图片上传失败',
-		preview: '头像预览',
+		preview: '图片预览',
 		btn: {
 			off: '取消',
 			close: '关闭',
@@ -14,7 +14,7 @@ export default {
 		},
 		error: {
 			onlyImg: '仅限图片格式',
-			outOfSize: '单文件大小不能超过 ',
+			outOfSize: '单图片大小不能超过 ',
 			lowestPx: '图片最低像素为（宽*高）：'
 		}
 	},
@@ -38,7 +38,7 @@ export default {
 		}
 	},
 	en: {
-		hint: 'Click or drag the file here to upload',
+		hint: 'Click or drag the image here to upload',
 		loading: 'Uploading…',
 		noSupported: 'Browser is not supported, please use IE10+ or other browsers',
 		success: 'Upload success',