修改用户头像上传

src/api/user.js

@@ -12,15 +12,24 @@ export function login(data) {
   })
 }
 
-// 获取验证码
-export function getCodeImg() {
+// 用户头像上传
+export function uploadAvatar(data) {
   return request({
-    url: '/captchaImage',
+    url: '/system/user/profile/avatar',
+    method: 'post',
+    data: data
+  })
+}
+
+// 注册方法
+export function register(data) {
+  return request({
+    url: '/register',
     headers: {
       isToken: false
     },
-    method: 'get',
-    timeout: 20000
+    method: 'post',
+    data: data
   })
 }
 

src/router/index.js

@@ -58,7 +58,7 @@ export const constantRoutes = [
   {
     path: '/Register',
     name: 'Register',
-    component: () => import('@/views/login/Register'),
+    component: () => import('@/views/login/register'),
     hidden: true
   },
   // {

src/views/user/profile/userAvatar.vue

@@ -1,19 +1,9 @@
-<!-- eslint-disable eqeqeq -->
 <template>
   <div>
-    <div class="user-info-head" @click="editCropper()">
-      <img :src="options.img" title="点击上传头像" class="img-circle img-lg">
-    </div>
-    <el-dialog
-      :title="title"
-      :visible.sync="open"
-      width="800px"
-      append-to-body
-      @opened="modalOpened"
-      @close="closeDialog"
-    >
+    <div class="user-info-head" @click="editCropper()"><img :src="options.img" title="点击上传头像" class="img-circle img-lg"></div>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
       <el-row>
-        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
           <vue-cropper
             v-if="visible"
             ref="cropper"
@@ -23,10 +13,11 @@
             :auto-crop-width="options.autoCropWidth"
             :auto-crop-height="options.autoCropHeight"
             :fixed-box="options.fixedBox"
+            :output-type="options.outputType"
             @realTime="realTime"
           />
         </el-col>
-        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
           <div class="avatar-upload-preview">
             <img :src="previews.url" :style="previews.img">
           </div>
@@ -35,48 +26,27 @@
       <br>
       <el-row>
         <el-col :lg="2" :sm="3" :xs="3">
-          <el-upload
-            action="#"
-            :http-request="requestUpload"
-            :show-file-list="false"
-            :before-upload="beforeUpload"
-          >
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
             <el-button size="small">
               选择
               <i class="el-icon-upload el-icon--right" />
             </el-button>
           </el-upload>
         </el-col>
-        <el-col :lg="{ span: 1, offset: 2 }" :sm="2" :xs="2">
+        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
           <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
         </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
-          <el-button
-            icon="el-icon-minus"
-            size="small"
-            @click="changeScale(-1)"
-          />
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
         </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
-          <el-button
-            icon="el-icon-refresh-left"
-            size="small"
-            @click="rotateLeft()"
-          />
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
         </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2">
-          <el-button
-            icon="el-icon-refresh-right"
-            size="small"
-            @click="rotateRight()"
-          />
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
         </el-col>
-        <el-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2">
-          <el-button
-            type="primary"
-            size="small"
-            @click="uploadImg()"
-          >提 交</el-button>
+        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
         </el-col>
       </el-row>
     </el-dialog>
@@ -109,7 +79,8 @@ export default {
         autoCrop: true, // 是否默认生成截图框
         autoCropWidth: 200, // 默认生成截图框宽度
         autoCropHeight: 200, // 默认生成截图框高度
-        fixedBox: true // 固定截图框大小 不允许改变
+        fixedBox: true, // 固定截图框大小 不允许改变
+        outputType: 'png' // 默认生成截图为PNG格式
       },
       previews: {},
       resizeHandler: null
@@ -135,7 +106,8 @@ export default {
       this.$refs.cropper.refresh()
     },
     // 覆盖默认的上传行为
-    requestUpload() {},
+    requestUpload() {
+    },
     // 向左旋转
     rotateLeft() {
       this.$refs.cropper.rotateLeft()
@@ -153,9 +125,7 @@ export default {
     beforeUpload(file) {
       // eslint-disable-next-line eqeqeq
       if (file.type.indexOf('image/') == -1) {
-        this.$modal.msgError(
-          '文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。'
-        )
+        this.$modal.msgError('文件格式错误，请上传图片类型,如JPG、PNG后缀的文件。')
       } else {
         const reader = new FileReader()
         reader.readAsDataURL(file)
@@ -166,10 +136,10 @@ export default {
     },
     // 上传图片
     uploadImg() {
-      this.$refs.cropper.getCropBlob((data) => {
+      this.$refs.cropper.getCropBlob(data => {
         const formData = new FormData()
         formData.append('avatarfile', data)
-        uploadAvatar(formData).then((response) => {
+        uploadAvatar(formData).then(response => {
           this.open = false
           this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl
           store.commit('SET_AVATAR', this.options.img)
@@ -199,7 +169,7 @@ export default {
 }
 
 .user-info-head:hover:after {
-  content: "+";
+  content: '+';
   position: absolute;
   left: 0;
   right: 0;