refactor: standardized files name (#1884)

style-guide: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/style-guide.html#style-guide

src/views/components-demo/avatar-upload.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="components-container">
+    <code>This is based on
+      <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
+      {{ $t('components.imageUploadTips') }}
+    </code>
+
+    <pan-thumb :image="image" />
+
+    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
+      Change Avatar
+    </el-button>
+
+    <image-cropper
+      v-show="imagecropperShow"
+      :key="imagecropperKey"
+      :width="300"
+      :height="300"
+      url="https://httpbin.org/post"
+      lang-type="en"
+      @close="close"
+      @crop-upload-success="cropSuccess"
+    />
+  </div>
+</template>
+
+<script>
+import ImageCropper from '@/components/ImageCropper'
+import PanThumb from '@/components/PanThumb'
+
+export default {
+  name: 'AvatarUploadDemo',
+  components: { ImageCropper, PanThumb },
+  data() {
+    return {
+      imagecropperShow: false,
+      imagecropperKey: 0,
+      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
+    }
+  },
+  methods: {
+    cropSuccess(resData) {
+      this.imagecropperShow = false
+      this.imagecropperKey = this.imagecropperKey + 1
+      this.image = resData.files.avatar
+    },
+    close() {
+      this.imagecropperShow = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .avatar{
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+  }
+</style>
+