new

src/components/basicInformation/person/addPerson.vue

@@ -36,17 +36,12 @@
                         </el-select>
                     </el-form-item>
                 </p>
-                <p>
-                    <el-form-item label="照片:" class="inline">
-                        <el-upload
-                            action="https://jsonplaceholder.typicode.com/posts/"
-                            list-type="picture-card"
-                            :limit="1"
-                            :http-request="uploadFile"
-                            :on-remove="handleRemove">
-                        <i class="el-icon-plus"></i>
-                        </el-upload>
-                    </el-form-item>
+                <p class="upload">
+                    <i>照片：</i>
+                    <span @click="uploadHeadImg">
+                        <img :src="imageUrl" style="width: 60px;"/>
+                        <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
+                    </span>
                 </p>
                 <p class="line"></p>
                 <p class="buttonClick">
@@ -80,7 +75,10 @@ export default {
                     { required: true, message: '请输入账户', trigger: 'blur' }
                 ]
             },
-            dialogImageUrl: ''
+            dialogImageUrl: '',
+            imageUrl: require('./img/upload.png'),
+            uploadForm: new FormData(), // formDate
+            path: '' // 头像路径
         }
     },
     created() {
@@ -93,13 +91,15 @@ export default {
             this.$refs[formName].validate((valid) => {
                 if (valid) {
                     console.log(this.form);
+                    let sex = this.form.sex === '男' ? 0 : 1;
                     let val = {
                         'name': this.form.name,
                         'number': this.form.phone,
                         'roleId': this.form.role,
                         'unitId': this.form.unit,
                         'userName': this.form.userName,
-                        'sex': this.form.sex
+                        'sex': sex,
+                        'path': this.path
                     }
                     this.$server.postUserAdd(val).then((res) => { // 数据请求
                         if (res.data.code === 200) {
@@ -121,11 +121,30 @@ export default {
             this.$refs[formName].resetFields();
             this.$emit('on-cancel')
         },
-        uploadFile(file) {
-            console.log(file)
+        // 将头像显示
+        handleFile(e) {
+            let $target = e.target || e.srcElement
+            let file = $target.files[0]
+            let reader = new FileReader()
+            reader.onload = (data) => {
+                let res = data.target || data.srcElement
+                this.imageUrl = res.result
+            }
+            reader.readAsDataURL(file);
+            this.uploadForm.append('file', file);
+            this.$server.postUserGetPath(this.uploadForm).then((res) => { // 数据请求
+                if (res.data.code === 200) {
+                    this.path = res.data.data;
+                } else {
+                    this.$message.error('数据请求失败！')
+                }
+            }).catch(err => {
+                this.$message.error('数据请求失败！');
+            })
         },
-        handleRemove(file, fileList) {
-            console.log(file, fileList);
+        // 打开上传功能
+        uploadHeadImg() {
+            this.$el.querySelector('.hiddenInput').click();
         }
     },
     components: {
@@ -175,5 +194,19 @@ export default {
     .addPerson>>>.el-form-item{
         margin-bottom: 15px;
     }
+    .addPerson .hiddenInput{
+        display: none;
+    }
+    .addPerson .upload>i{
+        width: 90px;
+        display: inline-block;
+        text-align: right;
+    }
+    .addPerson .upload>span{
+        cursor: pointer;
+    }
+    .addPerson .upload{
+        height: 100px;
+    }
 
 </style>

src/components/basicInformation/person/person.vue

@@ -197,6 +197,7 @@ export default {
         reset() {
             this.init();
             this.openModel = false;
+            this.components = '';
         },
         // 查看
         read(row) {

src/services/server.js

@@ -270,6 +270,12 @@ const server = {
             method: 'post',
             data: data
         })
+    },
+    postUserGetPath(data) { // 新增用户，获取照片路径
+        return axios('/user/getPath', {
+            method: 'post',
+            data: data
+        })
     }
 }
 export default server;