fix pic wall

src/views/system/personalPage/detail/pic.vue

@@ -1,6 +1,8 @@
 <template>
     <div style="margin:10px;">
+
       <el-form>
+            <el-col>
         <el-form-item label-width="0px" prop="picture" style="width: 100%;">
             <el-upload ref="upload"
                 action="#"
@@ -17,6 +19,11 @@
                 <img width="100%" :src="dialogImageUrl" alt="">
             </el-dialog>
         </el-form-item>
+            </el-col>
+            
+          <el-col :span="8" v-for="item in picList">
+                <img :src="item.value" class="image">
+            </el-col>
       </el-form>
     </div>
 </template>
@@ -49,17 +56,29 @@ export default {
     getList(pid){
       debugger
         allPersonalImg(this.personalImg).then(res => {
-            // this.picList.push({ key: res.id, value: res.url })
+            if(res.code !== 200){
+                this.$message.error('获取照片列表失败')
+                return
+            }
+            var apiUrl = process.env.VUE_APP_BASE_API;
+            var items = res.data;
+            for (const i in items) {
+                var url = apiUrl + items[i].url;
+                this.picList.push({ key: items[i].id, value: url})
+            }
+            console.log( this.picList)
         })
     },
     uploadAvatar(item) { 
-      debugger
+        debugger
         const formData = new FormData()
+        const pid = this.personalImg.personalId;
         formData.append('file', item.file)
-        formData.append('item', this.personalImg)
+        formData.append('personalId', pid)
         const uid = item.file.uid
         uploadFile(formData).then(res => {
             this.picList.push({ key: uid, value: res.url })
+            this.emptyUpload()
         }).catch(() => {
             this.$message.error('上传失败，请重新上传')
             this.emptyUpload()
@@ -97,7 +116,7 @@ export default {
         if (mainImg) {
             if (mainImg.length) {
                 mainImg.forEach(item => {
-                item.clearFiles()
+                    item.clearFiles()
                 })
             } else {
                 this.$refs.upload.clearFiles()
@@ -115,4 +134,17 @@ export default {
      width: 20%;
      vertical-align: middle;
  }
+ .image {
+    width: 50%;
+    display: block;
+  }
+
+  .clearfix:before, .clearfix:after {
+      display: table;
+      content: "";
+  }
+  
+  .clearfix:after {
+      clear: both
+  }
 </style>