t

frontHu · Nov 14, 2018 · c2e60b4 · c2e60b4
1 parent 093e381
commit c2e60b4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git a/src/api/friend.api.js b/src/api/friend.api.js
@@ -0,0 +1,5 @@
+import fetch from './index'
+
+export function addFriend(data) {
+  return fetch('/friend/add', data)
+}
diff --git a/src/page/Friend/Friend.vue b/src/page/Friend/Friend.vue
@@ -7,14 +7,9 @@
       title="添加好朋友"
       :visible="dialogVisible"
     >
-      <el-upload
-        class="avatar-uploader"
-        action="https://jsonplaceholder.typicode.com/posts/"
-        :show-file-list="false"
-      >
-        <img v-if="imageUrl" :src="imageUrl" class="avatar">
-        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-      </el-upload>
+      <div class="info">
+        <input type="file" @change="uploadImg($event)"/>
+      </div>
       <div class="info">
         <el-input v-model="name" placeholder="名称"></el-input>
       </div>
@@ -56,6 +51,7 @@
 </template>
 
 <script>
+import { addFriend } from './../../api/friend.api.js'
 export default {  
   name: 'Friend',
   data() {
@@ -68,6 +64,16 @@ export default {
       imageUrl: ''
     }
   },
+  methods: {
+    uploadImg(e) {
+      let file = e.target.files[0]
+      let formData = new FormData()
+      formData.append('file', file)
+      addFriend(formData).then(res => {
+        console.log(res, 'res') 
+      })
+    }
+  }
 }
 </script>
 
@@ -78,28 +84,28 @@ export default {
       margin-bottom: 20px;
     }
     .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+      border-color: #409EFF;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
     .info {
       margin-bottom: 20px;
     }