前端ui样式优化

web/src/components/upload/image.vue

@@ -2,7 +2,6 @@
 <template>
   <div>
     <el-upload
-      class="image-uploader"
       :action="`${path}/fileUploadAndDownload/upload`"
       :headers="{ 'x-token': token }"
       :show-file-list="false"
@@ -10,8 +9,7 @@
       :before-upload="beforeImageUpload"
       :multiple="false"
     >
-      <img v-if="imageUrl" :src="showImageUrl" class="image">
-      <i v-else class="el-icon-plus image-uploader-icon" />
+      <el-button size="mini" type="primary">压缩上传</el-button>
     </el-upload>
   </div>
 </template>
@@ -53,6 +51,13 @@ export default {
   },
   methods: {
     beforeImageUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isPng = file.type === 'image/png'
+      if (!isJPG && !isPng) {
+        this.$message.error('上传头像图片只能是 jpg或png 格式!')
+        return false
+      }
+
       const isRightSize = file.size / 1024 < this.fileSize
       if (!isRightSize) {
         // 压缩