修复图片上传组件内图片不能填充边框

litemall-admin/src/views/goods/create.vue

@@ -46,7 +46,6 @@
             :headers="headers"
             :on-success="uploadPicUrl"
             class="avatar-uploader"
-            list-type="picture-card"
             accept=".jpg,.jpeg,.png,.gif">
             <img v-if="goods.picUrl" :src="goods.picUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
@@ -169,7 +168,6 @@
               :headers="headers"
               :on-success="uploadSpecPicUrl"
               class="avatar-uploader"
-              list-type="picture-card"
               accept=".jpg,.jpeg,.png,.gif">
               <img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"/>
@@ -233,7 +231,6 @@
               :headers="headers"
               :on-success="uploadProductUrl"
               class="avatar-uploader"
-              list-type="picture-card"
               accept=".jpg,.jpeg,.png,.gif">
               <img v-if="productForm.url" :src="productForm.url" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"/>
@@ -306,6 +303,8 @@
   }
 
   .avatar-uploader .el-upload {
+    width: 145px;
+    height: 145px;
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
@@ -327,8 +326,8 @@
   }
 
   .avatar {
-    width: 120px;
-    height: 120px;
+    width: 145px;
+    height: 145px;
     display: block;
   }
 </style>

litemall-admin/src/views/goods/edit.vue

@@ -40,14 +40,30 @@
         </el-form-item>
 
         <el-form-item label="商品图片">
-          <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadPicUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+          <el-upload
+            :headers="headers"
+            :action="uploadPath"
+            :show-file-list="false"
+            :on-success="uploadPicUrl"
+            class="avatar-uploader"
+            accept=".jpg,.jpeg,.png,.gif">
             <img v-if="goods.picUrl" :src="goods.picUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
         </el-form-item>
 
         <el-form-item label="宣传画廊">
-          <el-upload :action="uploadPath" :headers="headers" :limit="5" :file-list="galleryFileList" :on-exceed="uploadOverrun" :on-success="handleGalleryUrl" :on-remove="handleRemove" multiple accept=".jpg,.jpeg,.png,.gif" list-type="picture-card">
+          <el-upload
+            :action="uploadPath"
+            :headers="headers"
+            :limit="5"
+            :file-list="galleryFileList"
+            :on-exceed="uploadOverrun"
+            :on-success="handleGalleryUrl"
+            :on-remove="handleRemove"
+            multiple
+            accept=".jpg,.jpeg,.png,.gif"
+            list-type="picture-card">
             <i class="el-icon-plus"/>
           </el-upload>
         </el-form-item>
@@ -118,7 +134,13 @@
             <el-input v-model="specForm.value"/>
           </el-form-item>
           <el-form-item label="规格图片" prop="picUrl">
-            <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadSpecPicUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+            <el-upload
+              :headers="headers"
+              :action="uploadPath"
+              :show-file-list="false"
+              :on-success="uploadSpecPicUrl"
+              class="avatar-uploader"
+              accept=".jpg,.jpeg,.png,.gif">
               <img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"/>
             </el-upload>
@@ -169,7 +191,13 @@
             <el-input v-model="productForm.number"/>
           </el-form-item>
           <el-form-item label="货品图片" prop="url">
-            <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadProductUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+            <el-upload
+              :headers="headers"
+              :action="uploadPath"
+              :show-file-list="false"
+              :on-success="uploadProductUrl"
+              class="avatar-uploader"
+              accept=".jpg,.jpeg,.png,.gif">
               <img v-if="productForm.url" :src="productForm.url" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"/>
             </el-upload>
@@ -250,8 +278,8 @@
   text-align: center;
 }
 .avatar {
-  width: 120px;
-  height: 120px;
+  width: 145px;
+  height: 145px;
   display: block;
 }
 </style>

litemall-admin/src/views/mall/brand.vue

@@ -47,7 +47,13 @@
           <el-input v-model="dataForm.desc"/>
         </el-form-item>
         <el-form-item label="品牌商图片" prop="picUrl">
-          <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadPicUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+          <el-upload
+            :headers="headers"
+            :action="uploadPath"
+            :show-file-list="false"
+            :on-success="uploadPicUrl"
+            class="avatar-uploader"
+            accept=".jpg,.jpeg,.png,.gif">
             <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
@@ -86,8 +92,8 @@
   text-align: center;
 }
 .avatar {
-  width: 120px;
-  height: 120px;
+  width: 145px;
+  height: 145px;
   display: block;
 }
 </style>

litemall-admin/src/views/mall/category.vue

@@ -77,13 +77,25 @@
           </el-select>
         </el-form-item>
         <el-form-item label="类目图标" prop="iconUrl">
-          <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadIconUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+          <el-upload
+            :headers="headers"
+            :action="uploadPath"
+            :show-file-list="false"
+            :on-success="uploadIconUrl"
+            class="avatar-uploader"
+            accept=".jpg,.jpeg,.png,.gif">
             <img v-if="dataForm.iconUrl" :src="dataForm.iconUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
         </el-form-item>
         <el-form-item label="类目图片" prop="picUrl">
-          <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadPicUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+          <el-upload
+            :headers="headers"
+            :action="uploadPath"
+            :show-file-list="false"
+            :on-success="uploadPicUrl"
+            class="avatar-uploader"
+            accept=".jpg,.jpeg,.png,.gif">
             <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
@@ -122,8 +134,8 @@
   text-align: center;
 }
 .avatar {
-  width: 120px;
-  height: 120px;
+  width: 145px;
+  height: 145px;
   display: block;
 }
 </style>

litemall-admin/src/views/promotion/ad.vue

@@ -55,7 +55,13 @@
           <el-input v-model="dataForm.content"/>
         </el-form-item>
         <el-form-item label="广告图片" prop="url">
-          <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+          <el-upload
+            :headers="headers"
+            :action="uploadPath"
+            :show-file-list="false"
+            :on-success="uploadUrl"
+            class="avatar-uploader"
+            accept=".jpg,.jpeg,.png,.gif">
             <img v-if="dataForm.url" :src="dataForm.url" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
@@ -105,8 +111,8 @@
   text-align: center;
 }
 .avatar {
-  width: 120px;
-  height: 120px;
+  width: 145px;
+  height: 145px;
   display: block;
 }
 </style>

litemall-admin/src/views/promotion/topic.vue

@@ -59,7 +59,13 @@
           <el-input v-model="dataForm.subtitle"/>
         </el-form-item>
         <el-form-item label="专题图片" prop="picUrl">
-          <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadPicUrl" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+          <el-upload
+            :headers="headers"
+            :action="uploadPath"
+            :show-file-list="false"
+            :on-success="uploadPicUrl"
+            class="avatar-uploader"
+            accept=".jpg,.jpeg,.png,.gif">
             <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
@@ -107,8 +113,8 @@
   text-align: center;
 }
 .avatar {
-  width: 120px;
-  height: 120px;
+  width: 145px;
+  height: 145px;
   display: block;
 }
 </style>

litemall-admin/src/views/sys/admin.vue

@@ -47,7 +47,13 @@
           <el-input v-model="dataForm.password" type="password" auto-complete="off"/>
         </el-form-item>
         <el-form-item label="管理员头像" prop="avatar">
-          <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadAvatar" class="avatar-uploader" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif">
+          <el-upload
+            :headers="headers"
+            :action="uploadPath"
+            :show-file-list="false"
+            :on-success="uploadAvatar"
+            class="avatar-uploader"
+            accept=".jpg,.jpeg,.png,.gif">
             <img v-if="dataForm.avatar" :src="dataForm.avatar" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
@@ -92,8 +98,8 @@
   text-align: center;
 }
 .avatar {
-  width: 120px;
-  height: 120px;
+  width: 145px;
+  height: 145px;
   display: block;
 }
 </style>