图片样式优化

src/views/product/components/imageComponent.vue

@@ -7,22 +7,14 @@
             <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
                 @click="clickEvent(item)">
                 <img :src="item.url" style="width: 100px;height: 100px;" alt="">
-                <!-- <el-popconfirm title="确定删除吗？" class="show" @confirm="deleteEvent(item.id)">
-                    <template v-if="item.pid != '681'">
-                        <template v-if="item.pid != '682'">
-                            <template v-if="item.pid != '699'">
-                                <i class="el-icon-error buttonstyle" slot="reference"></i>
-                            </template>
-</template>
-</template>
-</el-popconfirm> -->
             </li>
         </ul>
         <template v-if="showUpload">
             <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
                 @close="showUpload = false">
-                <el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
+                <el-upload :before-remove="handleBeforeRemove" :before-upload="beforeUpload" list-type="picture-card"
-                    :file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
+                    :on-success="handleSuccess" :file-list="fileList" :headers="headers" :action="qiNiuUploadApi"
+                    class="upload-demo" multiple>
                     <i class="el-icon-plus"></i>
                 </el-upload>
                 <div slot="footer" class="dialog-footer">
@@ -91,6 +83,15 @@ export default {
             let index = this.files.findIndex(ele => ele.name == file.name)
             this.files.splice(index, 1);
         },
+        beforeUpload(file) {
+            if (file.type == 'image/png') {
+            } else if (file.type == 'image/jpeg') {
+            } else {
+                this.$message.error('只能上传图片')
+                return false
+            }
+
+        },
         clickEvent(d) {
             this.selectList = d
             this.$emit('onSelectImage', d)
@@ -138,8 +139,11 @@ li {
     flex-wrap: wrap;
     overflow: auto;
     height: 400px;
+
 }
 
+
+
 .listyle {
     width: 110px;
     height: 110px;
@@ -149,6 +153,10 @@ li {
     position: relative;
 }
 
+.listyle:last-child {
+    margin-right: auto;
+}
+
 .upImgStyles {
     cursor: pointer;
     width: 110px;