爱数的头像

src/components/httpServer/httpServer.js

@@ -40,3 +40,4 @@ export function uploadImg( rand, formData ) {
     dataType:"multipart/form-data"
   })
  }
+

src/components/upload/index.vue

@@ -1,75 +1,128 @@
 <template>
   <div>
-    <el-upload
-      ref="uploader"
-      :action="`/upload?u=${s.u}&t=${s.t}&v=1.0&s=${s.s}`"
-      :multiple="false"
-      :show-file-list="false"
-      accept="image/jpeg,image/png"
-      class="image-uploader"
-      :drag="drag"
-      name="avatar"
-      :on-success="handleImageSuccess"
-      :before-upload="beforeImageUpload">
-      <el-button type="text" style="width: 200px;" class="mt20">
+    <el-upload ref="uploader" :action="`/upload?u=${s.u}&t=${s.t}&v=1.0&s=${s.s}`" :multiple="false"
+      :show-file-list="false" accept="image/jpeg,image/png" class="image-uploader" :drag="drag" name="avatar"
+      :on-success="handleImageSuccess" :http-request="uploadSectionFile" :before-upload="beforeImageUpload">
+      <el-button type="text" style="width: 200px;">
         {{placeholder}}
       </el-button>
     </el-upload>
+
+
+    <el-dialog
+        title="图片上传"
+        append-to-body
+        close-on-click-modal
+        :visible.sync="progressFlag"
+        width="450px">
+        <img :src="tempUrl"  style="width: 400px;margin: 0 auto;" />
+        <div style="margin: 20px auto;">
+          <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent"></el-progress>
+        </div>
+        <div style="margin: 10px auto;text-align: center;">
+          <span style="color: red;">{{progressFlagMsg}}</span>
+        </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
   import md5 from 'js-md5'
+  import axios from 'axios'
   export default {
     name: 'Upload',
     components: {},
     props: {
-      placeholder:{
+      placeholder: {
         type: String,
         default: "点击上传基准照片",
       },
-      drag:{
+      drag: {
         type: Boolean,
         default: false,
       },
-      mins:{
+      mins: {
         type: Number,
         default: 20,
       },
-      maxs:{
+      maxs: {
         type: Number,
-        default: 200,
+        default: 20000,
       },
     },
     data() {
-      let s = { u: localStorage.uid||'0', t:Date.now(), v:1.1 }
-      s.s = md5( "hall_" + s.v + s.t + '017c0743819088468e590246464cc75f' )
+      let s = {
+        u: localStorage.uid || '0',
+        t: Date.now(),
+        v: 1.1
+      }
+      s.s = md5("hall_" + s.v + s.t + '017c0743819088468e590246464cc75f')
       return {
-        fileMd5:'',
+        fileMd5: '',
         onupload: false,
+        progressPercent: 0,
+        tempUrl: '',
+        progressFlag: false,
+        progressFlagMsg: '',
         s
       }
     },
     methods: {
       beforeImageUpload(file) {
-
+        let _this = this
+        this.progressFlagMsg = ''
+        this.progressFlag = true;
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function (e) {
+          _this.tempUrl= "data:image/png;base64," + this.result.substring(this.result.indexOf(",") + 1)
+        }
         let fileSize = file.size / 1024
-        let {maxs,mins} = this;
-        if (fileSize > maxs ) {
+        let {
+          maxs,
+          mins
+        } = this;
+        if (fileSize > maxs) {
           this.$message.error(`上传文件大小不能超过 ${maxs}KB!`);
+          this.progressFlagMsg = `上传文件大小不能超过 ${maxs}KB!`;
           return false
         }
-        if (fileSize < mins ) {
+        if (fileSize < mins) {
           this.$message.error(`上传文件大小不能小于 ${mins}KB!`);
+          this.progressFlagMsg = `上传文件大小不能小于 ${mins}KB!`;
           return false
         }
         file.is_pass = true;
         return true;
       },
-       handleImageSuccess(res) {
-         console.log( this.$refs )
-          this.$emit("onFinish", res.data.url);
-       }
+      uploadSectionFile(params) {
+        const config = {
+          onUploadProgress: (progressEvent) => {
+            this.progressPercent = Number(
+              ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2)
+            );
+          },
+        };
+        let s = this.s
+        let form = new FormData();
+        form.append("avatar", params.file);
+        let url = `/upload?u=${s.u}&t=${s.t}&v=1.0&s=${s.s}`
+        axios.post(url, form, config).then((res) => {
+          let resD = res.data;
+          this.progressPercent = 100;
+          if( resD.code != 200){
+            this.$message.error(resD.data.msg);
+            this.progressFlagMsg = resD.data.msg;
+            return
+          }
+          this.progressFlag = false
+          this.$emit("onFinish", resD.data.url);
+        })
+      },
+      handleImageSuccess(res) {
+        console.log(this.$refs)
+        this.$emit("onFinish", res.data.url);
+      }
     }
   }
 </script>

src/containers/center/setting/index.vue

@@ -1,7 +1,19 @@
 <template>
   <div class="m-right-block">
     <div class="right-block-bd tc">
-      <div style="margin: 0 auto;">
+      <el-row style="margin: 0 auto;">
+        <el-col :span="8">
+          <div style="margin: 10px auto;">
+            <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
+            <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
+          </div>
+
+          <div style="margin: 10px auto;">
+            <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
+            <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
+          </div>
+        </el-col>
+        <el-col :span="8">
           <el-form ref="elForm" :inline="false" style="width: 500px;margin: 0 auto;" label-width='160px' label-position="center">
             <el-form-item label="详细地址"  class="mt30" prop="address">
               <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
@@ -34,10 +46,11 @@
                 确认修改
               </el-button>
               <el-button type="warning" @click="passwdDialog=true">修改密码</el-button>
-              <el-button type="danger" @click="phoneDialog=true">修改手机</el-button>
+              <el-button type="danger" @click="openPhoneDialog()">修改手机</el-button>
             </el-form-item>
           </el-form>
-      </div>
+        </el-col>
+      </el-row>
 
       <el-dialog :visible.sync="passwdDialog" title="修改密码" center :close-on-click-modal="false"
         :modal-append-to-body="false" :append-to-body="true" :show-close="false">
@@ -78,6 +91,15 @@
         :modal-append-to-body="false" :append-to-body="true" :show-close="false">
 
         <el-form ref="phoneForm" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
+
+          <el-form-item label="用户身份证" label-width='150px' class="mt30" prop="cardId">
+            <el-input placeholder="输入用户身份证" v-model="phoneForm.cardId " style="width: 300px;" :maxlength="18" disabled />
+          </el-form-item>
+
+          <el-form-item label="用户的姓名" label-width='150px' class="mt30" prop="nickname">
+            <el-input placeholder="输入姓名" v-model="phoneForm.nickname " style="width: 300px;" :maxlength="11">
+            </el-input>
+          </el-form-item>
           <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone">
             <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11"
               show-word-limit>
@@ -94,7 +116,7 @@
           </el-form-item>
 
           <el-form-item label="" label-width='150px' class="mt30" prop="code">
-            <span style="color: red;">注意：手机必须本人实名认证手机</span>
+            <span style="color: red;">注意：必须本人实名认证</span>
           </el-form-item>
           <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
             <el-button type="primary" @click="phoneDialog=false">
@@ -167,6 +189,8 @@
           }, ],
         },
         phoneForm: {
+          cardId:'',
+          nickname:'',
           phone: '',
           code: ''
         },
@@ -213,7 +237,7 @@
         }).then(res => {
           if (res.code == 200) {
             this.userInfo.cardImg = res.url;
-            this.userInfo.nickname = res.nickanme
+            this.userInfo.nickname = res.nickname
             this.userInfo.address = res.address;
             this.saveBaseInfo(this.userInfo)
           }
@@ -259,6 +283,13 @@
           }
         })
       },
+      openPhoneDialog(){
+        this.phoneForm.phone = ''
+        this.phoneForm.code = ''
+        this.phoneForm.cardId = this.userInfo.cardId
+        this.phoneForm.nickname = this.userInfo.nickname
+        this.phoneDialog = true
+      },
       doSavePhone() {
         let {
           phone,