vue项目: 新增用户-上传头像实现

14_Vue项目/day-6/vue2-shop/src/api/users.js

@@ -20,3 +20,11 @@ export function deleteUser(id) {
 export function addUser(user) {
   return Vue.$http.put('/user/insert', user);
 }
+
+export function upload(url, data) {
+  return Vue.$http.post(url, data, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+}

14_Vue项目/day-6/vue2-shop/src/views/system/users/components/UserEdit.vue

@@ -55,13 +55,15 @@
         <el-upload
           action="/file/upload"
           list-type="picture-card"
-          :auto-upload="false"
+          :auto-upload="true"
           class="upload"
           :limit="1"
           accept="image/*"
           show-file-list
           :file-list="fileList"
           :http-request="customHttpRequst"
+          :data="{ folder: 'face' }"
+          :on-exceed="onExceed"
         >
           <i slot="default" class="el-icon-plus"></i>
           <div slot="file" slot-scope="{ file }">
@@ -75,18 +77,20 @@
                 class="el-upload-list__item-preview"
                 @click="handlePictureCardPreview(file)"
               >
-                <i class="el-icon-zoom-in"></i>
+                <i class="el-icon-zoom-in small"></i>
               </span>
 
               <span
-                v-if="!disabled"
                 class="el-upload-list__item-delete"
                 @click="handleRemove(file)"
               >
-                <i class="el-icon-delete"></i>
+                <i class="el-icon-delete small"></i>
               </span>
             </span>
           </div>
+          <div slot="tip" class="el-upload__tip">
+            只能上传图片文件，且只能上传一次头像！
+          </div>
         </el-upload>
       </el-form-item>
 
@@ -95,7 +99,7 @@
         <el-button type="primary" @click="submitForm()">立即创建</el-button>
       </el-form-item>
     </el-form>
-    <el-dialog :visible.sync="dialogVisible">
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
       <img width="100%" :src="editForm.face" alt="" />
     </el-dialog>
   </div>
@@ -104,7 +108,7 @@
 <script>
 import { getAllRoles } from '@/api/roles';
 import { getAllDepts } from '@/api/dept';
-import { addUser } from '@/api/users';
+import { addUser, upload } from '@/api/users';
 
 export default {
   name: 'UserEdit',
@@ -155,8 +159,33 @@ export default {
     };
   },
   methods: {
-    customHttpRequst() {},
-    handlePictureCardPreview(file) {},
+    onExceed(files) {
+      this.$message.warning('头像只能上传一个。');
+    },
+    async customHttpRequst({ action, data, file, filename }) {
+      const fd = new FormData();
+      // 将额外参数 添加到表单数据中
+      for (var k in data) {
+        if (data.hasOwnProperty(k)) {
+          fd.append(k, data[k]);
+        }
+      }
+      // 将要上传的文件，添加到 表单数据中
+      fd.append(filename, file);
+
+      let { code, data: d, msg } = await upload(action, fd).catch((err) => err);
+
+      this.$message(msg);
+
+      if (code == 200) {
+        console.log(`output->data`, d);
+        // 修改face值 为 头像上传后再服务器上的真实地址
+        this.editForm.face = d.url;
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogVisible = true;
+    },
     handleRemove(file) {},
     resetForm() {
       this.$refs.editForm.resetFields();
@@ -180,7 +209,7 @@ export default {
         this.$message(msg);
 
         // 如果添加成功 需要将对话框关闭同时刷新数据
-        this.$store.commit('users/setDialogVisible', false);
+        code === 200 && this.$store.commit('users/setDialogVisible', false);
       }
     },
     async fetchRoles() {
@@ -213,4 +242,15 @@ export default {
 .upload >>> .el-upload--picture-card i {
   font-size: 18px;
 }
+
+.upload >>> .el-upload-list--picture-card .el-upload-list__item {
+  width: 48px;
+  height: 48px;
+}
+
+.small {
+  width: 18px;
+  height: 18px;
+  font-size: 12px;
+}
 </style>