关于elemnt ui头像上传问题

Posted 2021-02-04 lujunan

  1 <template>
  2   <div id="corp-info" class="module">
  3     <!--<span>{{this.fileList}}</span>-->
  4     <el-form ref="form" :model="form" label-width="80px">
  5       <el-form-item label="头像">
  6         <div class="imgblock">
  7           <img :src="fileList[0].url" alt>
  8         </div>
  9         <el-popover placement="top" width="360" v-model="visible2">
 10           <el-upload
 11             class="upload-demo"
 12             name="files"
 13             ref="upload"
 14             action="https://api.kuaipidev.com/kp-server-back-oss/oss/corp/upload"
 15             :on-success="handleSuccess"
 16             :file-list="fileList"
 17             :on-change="handleChange"
 18             :auto-upload="false"
 19             :show-file-list="false"
 20             accept=".jpg, .png, .JPG"
 21           >
 22             <el-button slot="trigger" size="small" type="primary">选取照片</el-button>
 23             <el-button
 24               style="margin-left: 10px;"
 25               size="small"
 26               type="success"
 27               @click="submitUpload"
 28             >上传到服务器</el-button>
 29             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10M</div>
 30           </el-upload>
 31           <el-button slot="reference">修改</el-button>
 32         </el-popover>
 33       </el-form-item>
 34       <el-form-item label="姓名">
 35         <el-input v-model="form.name"></el-input>
 36       </el-form-item>
 37       <el-form-item label="手机">
 38         <el-input v-model="form.tel" @focus="centerDialogVisible = true"></el-input>
 39       </el-form-item>
 40        <el-form-item label="邮箱">
 41         <el-input v-model="form.email" @focus="centerDialogVisible_eml = true"></el-input>
 42       </el-form-item>
 43       <el-form-item label="微信">
 44         <el-input v-model="form.wx" @focus="wxBind"></el-input>
 45         <span v-if="closewx" class="close" @click="unTry">解绑</span>
 46       </el-form-item>
 47       <el-form-item>
 48         <el-button type="primary" @click="onSubmit">保存</el-button>
 49       </el-form-item>
 50     </el-form>
 51     <el-dialog title :visible.sync="centerDialogVisible" width="30%" center>
 52       <p class="person_title">修改手机</p>
 53       <div class="person_from">
 54         <input
 55           v-model="phone_num"
 56           placeholder="请输入大陆的手机号码"
 57           class="person_input"
 58           maxlength="11"
 59           onkeyup="value=value.replace(/[^d]/g,‘‘)"
 60         >
 61 
 62         <div class="person_div">
 63           <input
 64             v-model="psw_num"
 65             placeholder="验证码"
 66             class="person_inp"
 67             maxlength="4"
 68             onkeyup="value=value.replace(/[^d]/g,‘‘)"
 69           >
 70           <button @click="sendMsg" :disabled="isDisabled">{{buttonName}}</button>
 71         </div>
 72       </div>
 73       <span slot="footer" class="dialog-footer">
 74         <button class="per_btn" @click="phone_pass">提交</button>
 75       </span>
 76     </el-dialog>
 77     <el-dialog title :visible.sync="centerDialogVisible_eml" width="30%" center>
 78       <p class="person_title">修改邮箱</p>
 79       <div class="person_from">
 80         <input
 81           v-model="email_num"
 82           placeholder="请输入邮箱"
 83           class="person_input"
 84         >
 85         <div class="person_div">
 86           <input
 87             v-model="emlpsw_num"
 88             placeholder="验证码"
 89             class="person_inp"
 90             maxlength="4"
 91             onkeyup="value=value.replace(/[^d]/g,‘‘)"
 92           >
 93           <button @click="sendMsg_eml" :disabled="isDisabled_eml">{{buttonName_eml}}</button>
 94         </div>
 95       </div>
 96       <span slot="footer" class="dialog-footer">
 97         <button class="per_btn" @click="email_pass">提交</button>
 98       </span>
 99     </el-dialog>
100     <div style="width:0;height:0;overflow:hidden;display: inline-block;" id="wwx"></div>
101     <el-dialog title :visible.sync="wx_dialog" width="30%" center>
102       <p class="person_title">微信绑定</p>
103       <div ref="domm" id="xwwx"></div>
104     </el-dialog>
105   </div>
106 </template>
107 
108 <script>
109 import { getUserData, updateUserData, accountBindWx, accountUnBindWx, updatePhomail, updateEmail } from "@/api/personal";
110 import { sendSms } from "@/api/login";
111 import { kpMessage } from "@/components/notice/index";
112 import { randomn } from "@/lib/utils";
113 import format from "@/lib/format";
114 
115 export default {
116   data() {
117     return {
118       closewx: false, //隐藏解绑
119       QRcode: true,
120       isshow: false, //提示错误信息
121       isDisabled_eml:false,
122       isgood: false, //手机弹窗提交
123       img_star: true, //微信登陆中图片显示流程
124       img_load: false,
125       img_end: false,
126       istrue: true, //控制微信登陆前后提示文字
127       buttonName: "获取验证码",
128       buttonName_eml:"获取验证码",
129       isDisabled: false,
130       time: 60,
131       time_eml:60,
132       wx_dialog: false,
133       centerDialogVisible: false, //手机弹窗
134       centerDialogVisible_eml: false,//邮箱弹窗
135       fileList: [
136         {
137           name: " ",
138           url: " "
139         }
140       ],
141       visible2: false, //弹窗
142       form: {
143         name: "",
144         tel: "",
145         email:"",
146         wx: "未绑定"
147       },
148       phone_num: "",
149       email_num:"",
150       emlpsw_num:"",
151       psw_num: "",
152       uuid: "",
153       mockUrl: ‘http://localhost:8080/?code=021YODYe0khn0u1nBW1f0oDqYe0YODYP&state=accountwxbind‘
154     };
155   },
156   created() {
157     if (this.form.wx = ‘未绑定‘ && sessionStorage.wxbindcode) {
158       accountBindWx({
159         ‘accountId‘: sessionStorage.accountId || 0,
160         ‘appId‘: ‘wx4185833c33deeabe‘,
161         ‘code‘: sessionStorage.wxbindcode || ‘‘,
162         ‘corpId‘: sessionStorage.corpId || 0
163       }).then(res => {
164         if (res.code === 0) {
165           sessionStorage.removeItem(‘wxbindcode‘)
166           this.form.wx = ‘已绑定‘
167           this.loadUserData()
168         } else {
169           sessionStorage.removeItem(‘wxbindcode‘)
170           kpMessage.warning("微信绑定失败")
171           this.closewx = false
172         }
173       })
174     }
175     this.loadUserData()
176   },
177   mounted() {
178     this.$nextTick(() => {
179       let wx = new WxLogin({
180         id: "wwx",
181         appid: "wx4185833c33deeabe",
182         scope: "snsapi_login",
183         redirect_uri: "https://boss.kuaipiyun.com",
184         state: "accountwxbind",
185         style: "black",
186         href: "https://kptom.com/api/static/stylesheets/wechat/login.css"
187       });
188     });
189   },
190   methods: {
191     wxBind() {
192       if (this.form.wx === ‘已绑定‘) return
193       this.wx_dialog = true;
194       this.QRcode = false;
195       this.$nextTick(() => {
196         let dom = document.getElementById("wwx");
197         dom.style.height = "375px";
198         dom.style.width = "300px";
199         this.$refs["domm"].appendChild(dom);
200       });
201     },
202     loadUserData () {
203       //渲染
204       getUserData({
205         userId: sessionStorage.getItem("userId")
206       }).then(res => {
207         if (res.code == 0) {
208           //获取用户信息
209           this.fileList[0].url ="http://kp7files.oss-cn-shanghai.aliyuncs.com" +"/" + res.data.userAvatar;
210           this.form.name = res.data.userName;
211           this.form.tel = res.data.userPhone;
212           this.form.email = res.data.userEmail;
213           if (res.data.wxOpenid) {
214             this.form.wx = ‘已绑定‘
215             this.closewx = true
216           } else {
217             this.form.wx = ‘未绑定‘
218             this.closewx = false
219           }
220         } else {
221           kpMessage.warning("获取用户信息失败")
222           this.closewx = false
223         }
224       })
225     },
226     onSubmit() {
227       let sendData = {
228         type: 2,
229         accountId: sessionStorage.accountId || "",
230         userId: sessionStorage.userId || "",
231         userName: this.form.name,
232         userPhone: this.form.tel,
233         userEmail:this.form.email,
234         requestId: "4" + new Date().getTime() + randomn(4)
235       };
236       updateUserData(sendData).then(res => {
237         if (res.code == 0) {
238           kpMessage.warning("设置成功");
239           console.log(res);
240         } else {
241           kpMessage.warning("设置失败");
242         }
243       });
244     },
245     // change事件
246     handleChange(file) {
247       Object.defineProperty(file.raw, "name", {
248         //通过修改原型中的name
249         writable: true
250       });
251       let timeTamp = format.timeFormatter(new Date(), "yyyy-MM-dd");
252       const uuidV1 = require("uuid/v1");
253       this.uuid = file.raw.name =
254         "boss_img" +
255         "/" +
256         sessionStorage.userId +
257         "/" +
258         timeTamp +
259         "-" +
260         uuidV1(); //图片路径
261         let testmsg=file.name.substring(file.name.lastIndexOf(‘.‘)+1)                 
262       const extension = testmsg === ‘jpg‘  
263       const extension2 = testmsg === ‘png‘  
264       const isLt10M = file.size / 1024 / 1024 < 10;
265       if(!extension && !extension2) {  
266         kpMessage.warning("上传文件只能是 jpg、png格式!");
267         this.visible2= false
268       }  
269       if (!isLt10M) {
270         kpMessage.warning("上传头像图片大小不能超过 10MB!");
271       }
272       return isLt10M;
273     },
274     submitUpload() {
275       //上传
276       this.$refs.upload.submit();
277       let sendData = {
278         type: 1,
279         userAvatar: this.uuid,
280         userId: sessionStorage.userId || "0"
281       };
282       updateUserData(sendData).then(res => {
283         if (res.code == 0) {
284           this.visible2= false
285           kpMessage.warning("上传服务器成功");
286         } else {
287           kpMessage.warning("上传服务器失败");
288         }
289       });
290     },
291     handleSuccess(response, file, fileList) {
292       console.log(fileList);
293       let data = {
294         name: response.data[0].fileName,
295         url: response.data[0].remoteUrl
296       };
297       this.fileList.unshift(data);
298     },
299     sendMsg() {//手机发送短信
300       let _this = this;
301       _this.isDisabled = true;
302       let interval = window.setInterval(function() {
303         _this.buttonName = "再次获取（" + _this.time + "s）"
304         --_this.time;
305         if (_this.time < 0) {
306           _this.buttonName = "获取验证码"
307           _this.time = 60
308           _this.isDisabled = false
309           window.clearInterval(interval)
310         }
311       }, 1000);
312       let sendData = {
313         phone: this.phone_num,
314         type: 3
315       };
316       sendSms(sendData).then(res => {
317         if (res.code == 0) {
318           kpMessage.warning("短信已发送")
319         } else {
320           kpMessage.warning("短信获取失败")
321         }
322       });
323     },
324     sendMsg_eml() {//发送邮箱
325       let _this = this;
326       _this.isDisabled_eml = true;
327       let interval = window.setInterval(function() {
328         _this.buttonName_eml = "再次获取（" + _this.time_eml + "s）";
329         --_this.time_eml;
330         if (_this.time_eml < 0) {
331           _this.buttonName_eml = "获取验证码"
332           _this.time_eml = 60;
333           _this.isDisabled_eml = false
334           window.clearInterval(interval)
335         }
336       }, 1000);
337       let sendData = {
338         email: this.email_num,
339         type: 3
340       };
341       updateEmail(sendData).then(res => {
342         if (res.code == 0) {
343           kpMessage.warning("验证码已发送")
344         } else {
345           kpMessage.warning("验证码发送失败")
346         }
347       });
348     },
349     phone_pass() {//手机提交
350       let sendData = {
351         type: 1,
352         accountId : sessionStorage.getItem("accountId"),
353         number: this.phone_num,
354         code: this.psw_num
355       };
356       updatePhomail(sendData).then(res => {
357         if (res.code == 0) {
358           kpMessage.warning("手机设置成功")
359           this.form.tel = this.phone_num
360           this.centerDialogVisible = false
361         } else {
362           if(res.msg=="verification code expires"){
363             kpMessage.warning("验证码错误，请重试")
364           }else{
365             kpMessage.warning("该手机号已被占用，请选择另外的手机号")
366           }
367         }
368       });
369     },
370      email_pass() {//邮箱提交
371       let sendData = {
372         type: 2,
373         accountId : sessionStorage.getItem("accountId"),
374         number: this.email_num,//此时把邮箱的数据传给后台
375         code: this.emlpsw_num
376       };
377       updatePhomail(sendData).then(res => {
378         if (res.code == 0) {
379           kpMessage.warning("邮箱设置成功")
380           this.form.email = this.email_num//弹窗的邮箱数据赋值给展示页面的邮箱
381           this.centerDialogVisible_eml = false
382         } else {
383           if(res.msg=="verification code expires"){
384             kpMessage.warning("验证码错误，请重试")
385           }else{
386             kpMessage.warning("该邮箱号已被占用，请选择另外的邮箱号")
387           } 
388         }
389       });
390     },
391     unTry() {
392       let sendData = {
393         accountId: sessionStorage.accountId || ‘‘
394       }
395       accountUnBindWx(sendData).then(res => {
396         if (res.code == 0) {
397           kpMessage.warning("解除绑定成功")
398           this.loadUserData()
399         } else {
400           kpMessage.warning("解除绑定失败")
401         }
402       });
403     }
404   }
405 };
406 </script>
407 
408 <style rel="stylesheet/less" lang="less" scoped>
409 .module {
410   width: 450px;
411   .imgblock {
412     width: 50px;
413     height: 50px;
414     margin-right: 20px;
415     line-height: 1;
416     float: left;
417     border: 1px solid #ccc;
418     display: inline-table;
419     overflow: hidden;
420     border-radius: 5px;
421     img {
422       display: block;
423       width: 100%;
424     }
425   }
426 }
427 
428 .person_from {
429   width: 280px;
430   margin: auto;
431 }
432 
433 .person_title {
434   line-height: 18px;
435   font-size: 23px;
436   font-weight: bold;
437   color: #333;
438   text-align: center;
439   margin: 0;
440   padding: 0;
441 }
442 
443 .person_div {
444   width: 280px;
445   border: 1px solid #bfcbd9;
446   margin-top: 20px;
447   border-radius: 4px;
448 }
449 
450 .person_input {
451   width: 270px;
452   height: 30px;
453   border-radius: 4px;
454   padding-left: 10px;
455   border: 1px solid #bfcbd9;
456   margin-top: 50px;
457 }
458 
459 .person_inp {
460   width: 150px;
461   height: 30px;
462   padding-left: 10px;
463   border: none;
464   float: left;
465 }
466 
467 .person_div button {
468   width: 112px;
469   height: 32px;
470   border: none;
471   font-size: 12px;
472   background: none;
473   display: inline-block;
474   color: #0082e6;
475 }
476 
477 * {
478   outline: none;
479 }
480 
481 .per_btn {
482   width: 200px;
483   height: 30px;
484   background: #0082e6;
485   border-radius: 4px;
486   border: none;
487   color: #fff;
488   display: block;
489   margin: auto;
490   margin-bottom: 50px;
491 }
492 
493 .person_box {
494   width: 210px;
495   height: 210px;
496   box-shadow: 2px 2px 5px #999;
497   border: 1px solid #999;
498   margin: auto;
499   margin-top: 20px;
500   position: relative;
501   img {
502     width: 180px;
503     height: 180px;
504     margin: auto;
505     display: block;
506     position: absolute;
507     left: 0;
508     top: 0;
509     right: 0;
510     bottom: 0;
511   }
512   .img_load {
513     background: #eee;
514     width: 180px;
515     height: 180px;
516     margin: auto;
517     display: block;
518     position: absolute;
519     left: 0;
520     top: 0;
521     right: 0;
522     bottom: 0;
523     text-align: center;
524     line-height: 180px;
525     font-size: 16px;
526     p {
527       position: relative;
528       top: -175px;
529       left: 0;
530     }
531   }
532 }
533 
534 .per_p {
535   margin: auto;
536   width: 100%;
537   text-align: center;
538   margin-top: 5px;
539 }
540 
541 .el-icon-success {
542   font-size: 30px;
543   color: green;
544 }
545 
546 .peron_kp {
547   width: 250px;
548   margin: auto;
549 }
550 
551 .pperon {
552   display: inline-block;
553   width: 200px;
554   height: 30px;
555   span:first-child {
556     font-size: 18px;
557     font-weight: 600;
558   }
559 }
560 
561 .close {
562   background: none;
563   border: none;
564   position: absolute;
565   right: 20px;
566   top: 0;
567   color: #0082e6;
568 }
569 
570 .display_ {
571   height: 0;
572   width: 0;
573   overflow: hidden;
574 }
575 
576 #xwwx {
577 text-align: center;
578 }
579 </style>