代码优化

src/api/upload.js

@@ -12,9 +12,5 @@ export function fileUpload(data) {
 }
 
 export function base64uploadFile(data) {
-  return request({
-    url: '/common/base64uploadFile',
-    method: 'post',
-    data
-  })
+  return request.formDataPost('/common/base64uploadFile', data)
 }

src/api/user.js

@@ -29,3 +29,7 @@ export function setRegistry(data) {
     data
   })
 }
+
+export function uploadAvatar(data) {
+  return request.formDataPost('/user/uploadAvatar', data)
+}

src/main.js

@@ -25,8 +25,8 @@ Vue.use(filters)
 
 // mock in online
 if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
+  // const { mockXHR } = require('../mock')
+  // mockXHR()
 }
 
 Vue.config.productionTip = false

src/store/modules/user.js

@@ -70,7 +70,6 @@ const actions = {
         })
     })
   },
-
   // 重置token
   resetToken({ commit }) {
     return new Promise(resolve => {

src/utils/request.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import qs from 'qs'
 import { Toast, Dialog } from 'vant'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
@@ -56,4 +57,20 @@ service.interceptors.response.use(
   }
 )
 
+/**
+ * 使用 application/x-www-form-urlencoded format
+ * @param {*} url
+ * @param {*} postData
+ * @returns
+ */
+service.formDataPost = function(url, postData) {
+  const options = {
+    method: 'POST',
+    headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    data: qs.stringify(postData),
+    url
+  }
+  return service(options)
+}
+
 export default service

src/views/userSetting/index.vue

@@ -5,26 +5,49 @@
       <van-cell title="头像" class="cell_middle">
         <van-uploader :after-read="afterRead">
           <div class="user_avatar_upload">
-            <img
-              v-if="avatar"
-              :src="avatar"
-              alt="你的头像"
-            >
+            <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="你的头像">
             <van-icon v-else class-prefix="iconfont" name="camera" />
           </div>
         </van-uploader>
       </van-cell>
 
-      <van-cell title="昵称" to="/user/information/setNickname" :value="nickName" is-link />
-      <van-cell title="性别" :value="genderText" is-link @click="showSex = true" />
+      <van-cell
+        title="昵称"
+        to="/user/information/setNickname"
+        :value="userInfo.nickname"
+        is-link
+      />
+      <van-cell
+        title="邮箱"
+        :value="userInfo.email"
+        is-link
+      />
+      <van-cell
+        title="性别"
+        :value="userInfo.gender === 1?'男':'女'"
+        is-link
+        @click="userInfo.gender === 1"
+      />
+      <van-cell
+        title="生日"
+        :value="userInfo.birthday"
+        is-link
+      />
       <van-cell title="密码设置" to="/user/information/setPassword" is-link />
-      <van-cell title="手机号" to="/user/information/setMobile" :value="mobile" is-link />
+      <van-cell
+        title="手机号"
+        to="/user/information/setMobile"
+        :value="userInfo.mobile"
+        is-link
+      />
     </van-cell-group>
   </div>
 </template>
 
 <script>
 import { base64uploadFile } from '@/api/upload'
+import { uploadAvatar } from '@/api/user'
+import { mapGetters } from 'vuex'
 
 export default {
   data() {
@@ -36,15 +59,31 @@ export default {
       mobile: 133
     }
   },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
+  created() {
+    this.init()
+  },
   methods: {
+    init() {
+    },
     async afterRead(file) {
-      debugger
-      const data = {
+      const uploadRes = await base64uploadFile({
         base64content: file.content,
         filename: file.file.name
+      })
+      this.avatar = uploadRes.map.url
+      console.log(this.$store.getters)
+      const res = await uploadAvatar({
+        avatar: this.avatar
+      })
+      if (res.code !== 200) {
+        this.$toast.fail(res.msg)
+        return
       }
-      const res = await base64uploadFile(data)
-      this.avatar = res.map.url
+      await this.$store.dispatch('user/getInfo')
+      this.$toast.success('上传头像成功')
     }
   }
 }