关于elemnt ui头像上传问题

 ?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 || 0163 ??????}).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 = false172 ????????}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 === ‘已绑定‘) return193 ??????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 = true216 ??????????} else {217 ????????????this.form.wx = ‘未绑定‘218 ????????????this.closewx = false219 ??????????}220 ????????} else {221 ??????????kpMessage.warning("获取用户信息失败")222 ??????????this.closewx = false223 ????????}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 ????????//通过修改原型中的name249 ????????writable: true250 ??????});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= false268 ??????} ?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= false285 ??????????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].remoteUrl296 ??????};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 = 60308 ??????????_this.isDisabled = false309 ??????????window.clearInterval(interval)310 ????????}311 ??????}, 1000);312 ??????let sendData = {313 ????????phone: this.phone_num,314 ????????type: 3315 ??????};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 = false334 ??????????window.clearInterval(interval)335 ????????}336 ??????}, 1000);337 ??????let sendData = {338 ????????email: this.email_num,339 ????????type: 3340 ??????};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_num355 ??????};356 ??????updatePhomail(sendData).then(res => {357 ????????if (res.code == 0) {358 ??????????kpMessage.warning("手机设置成功")359 ??????????this.form.tel = this.phone_num360 ??????????this.centerDialogVisible = false361 ????????} 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_num376 ??????};377 ??????updatePhomail(sendData).then(res => {378 ????????if (res.code == 0) {379 ??????????kpMessage.warning("邮箱设置成功")380 ??????????this.form.email = this.email_num//弹窗的邮箱数据赋值给展示页面的邮箱381 ??????????this.centerDialogVisible_eml = false382 ????????} 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>