vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
vue項(xiàng)目ElementUI組件中el-upload組件與裁剪功能組件結(jié)合使用,供大家參考,具體內(nèi)容如下
如下圖所示,點(diǎn)擊上傳組件,選擇文件后,會(huì)立馬彈出圖片裁剪功能組件的頁面
問題描述:
1.在使用upload組件中,如果修改fileList中的內(nèi)容,瀏覽器會(huì)報(bào)錯(cuò)
2.獲取上傳的文件,傳遞給圖片裁剪組件(在on-change中獲取文件并傳遞個(gè)裁剪組件)
3.要獲取裁剪后的圖片即File文件(將裁剪后的圖片返回出去)
4.獲取到裁剪后的file調(diào)用上傳的接口
由于el-upload組件默認(rèn)使用的是
“選取文件后立即進(jìn)行上傳”,可通過auto-upload屬性進(jìn)行修改,將auto-upload設(shè)置為false;
同時(shí)也不顯示已上傳的文件列表,通過show-file-list屬性修改,將show-file-list設(shè)置為false。
獲取上傳的組件說明:使用elementUI 提供的方法 on-change,獲取已上傳的組件
elementUI中upload組件部分屬性如下:
關(guān)于裁剪組件,請(qǐng)看裁剪組件鏈接文檔
本案例主要代碼如下:
<el-form-item label="公司logo" prop="logo"> ? ? ? ? ? ? ? ? ? ? <el-upload ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="avatar-uploader" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ref="upload" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :action="uploadLogo" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :show-file-list="false" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :file-list="photoList" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :on-change="changePhotoFile" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :on-success="handleAvatarSuccess" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :before-upload="beforeAvatarUpload" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :headers="headerObj" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :auto-upload="false" ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? <img v-if="imageUrl" :src="imageUrl" class="avatar"> ? ? ? ? ? ? ? ? ? ? ? ? <div v-else class=" avatar-uploader-icon"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i ?class="my-icon-plus"></i> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="my-icon-word">添加</p> ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>--> ? ? ? ? ? ? ? ? ? ? </el-upload> ? ? ? ? ? ? ? ? ? ? <my-cropper ref="myCropper" @getFile="getFile" @upAgain="upAgain"></my-cropper> </el-form-item>
對(duì)應(yīng)的方法
?changePhotoFile(file, fileList){ ? ? ? ? ? ? ? ? if (fileList.length > 0) { ? ? ? ? ? ? ? ? ? ? this.photoList = [fileList[fileList.length - 1]] ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.handleCrop(file); ? ? ? ? ? ? }, ? ?handleCrop(file){ ? ? ? ? ? ? ? ? this.$nextTick(()=>{ ? ? ? ? ? ? ? ? ? ? this.$refs.myCropper.open(file.raw || file) ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? }, ? ? ? ? ? ? // 點(diǎn)擊彈框重新時(shí)觸發(fā) ? ? ? ? ? ? upAgain(){ ? ? ? ? ? ? ? ? this.$refs['upload'].$refs["upload-inner"].handleClick(); ? ? ? ? ? ? }, ? ? ? ? ? ? getFile(file){ ? ? ? ? ? ? ? ? const formData = new FormData(); ? ? ? ? ? ? ? ? formData.append("file",file) ? ? ? ? ? ? ? ? uploadSelfCompanyLogo(formData).then(res =>{ ? ? ? ? ? ? ? ? ? ? if (res.code === 0) { ? ? ? ? ? ? ? ? ? ? ? ? this.companyInfo.logo = res.filename; ? ? ? ? ? ? ? ? ? ? ? ? this.companyInfo.imageUrl = res.url; ? ? ? ? ? ? ? ? ? ? ? ? this.imageUrl = res.url; ? ? ? ? ? ? ? ? ? ? ? ? //上傳成功后,關(guān)閉彈框組件 ? ? ? ? ? ? ? ? ? ? ? ? // this.handleCrop(file); ? ? ? ? ? ? ? ? ? ? ? ? this.$refs.myCropper.close() ? ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? ? ? this.$message.error('上傳出錯(cuò)'); ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? },
整個(gè)vue代碼,包含上面的代碼
<template> ? ? <div class="form-out"> ? ? ? ? <el-form ? ? ? ? ? ? ? ? :rules="rules" ? ? ? ? ? ? ? ? :model="companyInfo" ? ? ? ? ? ? ? ? class="form" ? ? ? ? ? ? ? ? ref="registForm" ? ? ? ? ? ? ? ? label-position="left" ? ? ? ? ? ? ? ? label-width="92px" ? ? ? ? > ? ? ? ? ? ? <div class="personal-info"> ? ? ? ? ? ? ? ? <p class="tag"> ? ? ? ? ? ? ? ? ? ? <span class="light-slash">/</span> ? ? ? ? ? ? ? ? ? ? <span class="slash">/</span> ? ? ? ? ? ? ? ? ? ? <span class="tag-main">公司信息</span> ? ? ? ? ? ? ? ? ? ? <span class="slash">/</span> ? ? ? ? ? ? ? ? ? ? <span class="light-slash">/</span> ? ? ? ? ? ? ? ? </p> ? ? ? ? ? ? ? ? <el-form-item label="公司全稱" prop="companyName"> ? ? ? ? ? ? ? ? ? ? <span class="com-name">{{companyInfo.companyName}}</span> ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? <el-form-item label="公司簡(jiǎn)稱" prop="shortened"> ? ? ? ? ? ? ? ? ? ? <el-input ? ? ? ? ? ? ? ? ? ? ? ? ? ? style="width: 540px;height: 42px" ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-model="companyInfo.shortened" ? ? ? ? ? ? ? ? ? ? ? ? ? ? placeholder="請(qǐng)?zhí)顚懏?dāng)前公司簡(jiǎn)稱" ? ? ? ? ? ? ? ? ? ? ? ? ? ? clearable ? ? ? ? ? ? ? ? ? ? ></el-input> ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? <el-form-item label="行業(yè)領(lǐng)域" prop="industry"> ? ? ? ? ? ? ? ? ? ? <el-select ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="inputSelect" ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-model="companyInfo.industry" ? ? ? ? ? ? ? ? ? ? ? ? ? ? placeholder="請(qǐng)選擇行業(yè)領(lǐng)域" ? ? ? ? ? ? ? ? ? ? ? ? ? ? clearable ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? <el-option ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="item in industryOptions" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :key="item.value" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="item.label" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :value="item.value" ? ? ? ? ? ? ? ? ? ? ? ? ></el-option> ? ? ? ? ? ? ? ? ? ? </el-select> ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? <el-form-item label="公司規(guī)模" prop="scale"> ? ? ? ? ? ? ? ? ? ? <el-select ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="inputSelect" ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-model="companyInfo.scale" ? ? ? ? ? ? ? ? ? ? ? ? ? ? placeholder="請(qǐng)選擇公司規(guī)模" ? ? ? ? ? ? ? ? ? ? ? ? ? ? clearable ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? <el-option ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="item in scaleOptions" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :key="item.value" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="item.label" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :value="item.value" ? ? ? ? ? ? ? ? ? ? ? ? ></el-option> ? ? ? ? ? ? ? ? ? ? </el-select> ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? <el-form-item label="公司性質(zhì)" prop="nature"> ? ? ? ? ? ? ? ? ? ? <el-select ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-model="companyInfo.nature" ? ? ? ? ? ? ? ? ? ? ? ? ? ? placeholder="請(qǐng)選擇公司性質(zhì)" ? ? ? ? ? ? ? ? ? ? ? ? ? ? clearable ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? <el-option ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="item in natureOptions" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :key="item.value" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="item.label" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :value="item.value" ? ? ? ? ? ? ? ? ? ? ? ? ></el-option> ? ? ? ? ? ? ? ? ? ? </el-select> ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? <el-form-item label="公司logo" prop="logo"> ? ? ? ? ? ? ? ? ? ? <el-upload ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="avatar-uploader" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ref="upload" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :action="uploadLogo" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :show-file-list="false" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :file-list="photoList" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :on-change="changePhotoFile" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :on-success="handleAvatarSuccess" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :before-upload="beforeAvatarUpload" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :headers="headerObj" ? ? ? ? ? ? ? ? ? ? ? ? ? ? :auto-upload="false" ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? <img v-if="imageUrl" :src="imageUrl" class="avatar"> ? ? ? ? ? ? ? ? ? ? ? ? <div v-else class=" avatar-uploader-icon"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <i ?class="my-icon-plus"></i> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="my-icon-word">添加</p> ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>--> ? ? ? ? ? ? ? ? ? ? </el-upload> ? ? ? ? ? ? ? ? ? ? <my-cropper ref="myCropper" @getFile="getFile" @upAgain="upAgain"></my-cropper> ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? <el-form-item label="公司簡(jiǎn)介" prop="intro"> ? ? ? ? ? ? ? ? ? ? <el-input type="textarea" v-model="companyInfo.intro"></el-input> ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="submit"> ? ? ? ? ? ? ? ? <el-button ? ? ? ? ? ? ? ? ? ? ? ? class="next-button" ? ? ? ? ? ? ? ? ? ? ? ? type="primary" ? ? ? ? ? ? ? ? ? ? ? ? size="medium" ? ? ? ? ? ? ? ? ? ? ? ? :class="[nextFlag ?'next-button-bg-blue':'next-button-bg-grew']" ? ? ? ? ? ? ? ? ? ? ? ? @click="companyRegister"> ? ? ? ? ? ? ? ? ? ? 確定 ? ? ? ? ? ? ? ? </el-button> ? ? ? ? ? ? ? ? <span class="return-back" @click="returnBackFun"> 返回上一步 </span> ? ? ? ? ? ? </div> ? ? ? ? </el-form> ? ? </div> </template> <script> ? ? import debounce from "../../../common/debounce"; ? ? import DataDict from "../../../common/DataDict"; ? ? import {createCompanyBase,uploadSelfCompanyLogo} from ?'../../../network/request' ? ? import MyCropper from "./cropper.vue" ? ? export default { ? ? ? ? name: "ComFormThree", ? ? ? ? components:{MyCropper}, ? ? ? ? data(){ ? ? ? ? ? ? //信用代碼驗(yàn)證 ? ? ? ? ? ? var checkCreditCode = (rules, value, callback) => { ? ? ? ? ? ? ? ? let position = new RegExp(/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/); ? ? ? ? ? ? ? ? if(!position.test(value)) { ? ? ? ? ? ? ? ? ? ? callback(new Error('請(qǐng)輸入正確的統(tǒng)一社會(huì)信用代碼!')); ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? callback(); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? return{ ? ? ? ? ? ? ? ? nextFlag:false, ? ? ? ? ? ? ? ? uploadLogo: process.env.VUE_APP_BASE_URL + '/business/pub/iface/uploadCompanyLogo',//上傳共公司logo地址 ? ? ? ? ? ? ? ? imageUrl: '', ? ? ? ? ? ? ? ? companyInfo: { ? ? ? ? ? ? ? ? ? ? companyName: '', ? ? ? ? ? ? ? ? ? ? logo:'', ? ? ? ? ? ? ? ? ? ? creditCode: '', ? ? ? ? ? ? ? ? ? ? shortened: '', ? ? ? ? ? ? ? ? ? ? industry:null, ? ? ? ? ? ? ? ? ? ? scale:null, ? ? ? ? ? ? ? ? ? ? nature:null, ? ? ? ? ? ? ? ? ? ? companyId:null, ? ? ? ? ? ? ? ? ? ? imageUrl:'', ? ? ? ? ? ? ? ? ? ? intro:'' ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? photoList:[], ? ? ? ? ? ? ? ? industryOptions:DataDict.industryOptions,//行業(yè)領(lǐng)域數(shù)據(jù)字典 ? ? ? ? ? ? ? ? scaleOptions:DataDict.scaleOptions,//公司規(guī)模數(shù)據(jù)字典 ? ? ? ? ? ? ? ? natureOptions:DataDict.natureOptions,//公司性質(zhì)數(shù)據(jù)字典 ? ? ? ? ? ? ? ? rules: { ? ? ? ? ? ? ? ? ? ? companyName:[ ? ? ? ? ? ? ? ? ? ? ? ? { required: true}, ? ? ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ? ? ? creditCode:[ ? ? ? ? ? ? ? ? ? ? ? ? { required: true, message: '請(qǐng)輸入統(tǒng)一社會(huì)信用代碼', trigger: 'blur' }, ? ? ? ? ? ? ? ? ? ? ? ? { validator: checkCreditCode, trigger: 'blur' } ? ? ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ? ? ? logo:[{ required: true},], ? ? ? ? ? ? ? ? ? ? intro:[{ required: true, message: '請(qǐng)?zhí)顚懝竞?jiǎn)介',trigger: 'blur' },], ? ? ? ? ? ? ? ? ? ? shortened:[{ required: true, message: '請(qǐng)?zhí)顚懝竞?jiǎn)稱',trigger: 'blur'},], ? ? ? ? ? ? ? ? ? ? industry:[{ required: true, ? ? ? ? ? ? ? ? ? ? ? ? message: '請(qǐng)選擇行業(yè)領(lǐng)域', ? ? ? ? ? ? ? ? ? ? ? ? trigger: 'change'},], ? ? ? ? ? ? ? ? ? ? scale: [ ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? required: true, ? ? ? ? ? ? ? ? ? ? ? ? ? ? message: '請(qǐng)選擇公司規(guī)模', ? ? ? ? ? ? ? ? ? ? ? ? ? ? trigger: 'change' ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ? ? ? nature: [ ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? required: true, ? ? ? ? ? ? ? ? ? ? ? ? ? ? message: '請(qǐng)選擇公司性質(zhì)', ? ? ? ? ? ? ? ? ? ? ? ? ? ? trigger: 'change' ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? mounted() { ? ? ? ? ? ?// console.log("this.$store.personInfo.companyName",this.$store.getters.personInfo.companyName); ? ? ? ? ? ? ? ? this.companyInfo.companyName = this.pCompanyName; ? ? ? ? ? ? }, ? ? ? ? activated() { ? ? ? ? ? ? this.companyInfo.companyName = this.pCompanyName; ? ? ? ? }, ? ? ? ? computed:{ ? ? ? ? ? ? pCompanyName(){ ? ? ? ? ? ? ? ? return this.$store.getters.personInfo.companyName; ? ? ? ? ? ? } ? ? ? ? }, ? ? ?watch:{ ? ? ? ? ?companyInfo: { ? ? ? ? ? ? ?handler(val){ ? ? ? ? ? ? ? ? ?(val.companyName !== '' ? ? ? ? ? ? ? ? ? ? ?&& val.creditCode !=='' && val.creditCode.length>0 ? ? ? ? ? ? ? ? ? ? ?&& val.logo !== '' && val.logo.length>0 ? ? ? ? ? ? ? ? ? ? ?&& val.shortened !== '' && val.shortened.length >0 ? ? ? ? ? ? ? ? ? ? ?&& val.industry !== null ? ? ? ? ? ? ? ? ? ? ?&& val.nature !== null ? ? ? ? ? ? ? ? ? ? ?&& val.scale != null ? ? ? ? ? ? ? ? ?) ? ? ? ? ? ? ? ? ? ? ?? this.nextFlag = true : this.nextFlag = false; ? ? ? ? ? ? ?}, ? ? ? ? ? ? ?deep: true ? ? ? ? ?} ? ? ?}, ? ? ? ? /*mounted() { ? ? ? ? ? ? console.log("uploadLogo====",this.uploadLogo); ? ? ? ? },*/ ? ? ? ? methods:{ ? ? ? ? ? ? //上傳圖片觸發(fā) ? ? ? ? ? ? handleCrop(file){ ? ? ? ? ? ? ? ? this.$nextTick(()=>{ ? ? ? ? ? ? ? ? ? ? this.$refs.myCropper.open(file.raw || file) ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? }, ? ? ? ? ? ? // 點(diǎn)擊彈框重新時(shí)觸發(fā) ? ? ? ? ? ? upAgain(){ ? ? ? ? ? ? ? ? this.$refs['upload'].$refs["upload-inner"].handleClick(); ? ? ? ? ? ? }, ? ? ? ? ? ? getFile(file){ ? ? ? ? ? ? ? ? const formData = new FormData(); ? ? ? ? ? ? ? ? formData.append("file",file) ? ? ? ? ? ? ? ? uploadSelfCompanyLogo(formData).then(res =>{ ? ? ? ? ? ? ? ? ? ? if (res.code === 0) { ? ? ? ? ? ? ? ? ? ? ? ? this.companyInfo.logo = res.filename; ? ? ? ? ? ? ? ? ? ? ? ? this.companyInfo.imageUrl = res.url; ? ? ? ? ? ? ? ? ? ? ? ? this.imageUrl = res.url; ? ? ? ? ? ? ? ? ? ? ? ? //上傳成功后,關(guān)閉彈框組件 ? ? ? ? ? ? ? ? ? ? ? ? // this.handleCrop(file); ? ? ? ? ? ? ? ? ? ? ? ? this.$refs.myCropper.close() ? ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? ? ? this.$message.error('上傳出錯(cuò)'); ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ?// this.$refs.upload.submit(); ? ? ? ? ? ? }, ? ? ? ? ? ? companyRegister:debounce(function () { ? ? ? ? ? ? ? ? this.doCompanyRegister(); ? ? ? ? ? ? },500), ? ? ? ? ? ? //下一步 ? ? ? ? ? ? doCompanyRegister(){ ? ? ? ? ? ? ? ? this.$store.commit('addcompanyObjInfo',this.companyInfo); ? ? ? ? ? ? ? ? createCompanyBase(this.companyInfo).then(res =>{ ? ? ? ? ? ? ? ? ? ? if (res.code === 0 && res.msg === 'success') { ? ? ? ? ? ? ? ? ? ? ? ? console.log("創(chuàng)建成功"); ? ? ? ? ? ? ? ? ? ? ? ? /*this.$message.success('公司創(chuàng)建成功~'); ? ? ? ? ? ? ? ? ? ? ? ? this.$router.push("/client/auditPage");*/ ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? }, ? ? ? ? ? ? //頭像上傳成功之后的方法,進(jìn)行回調(diào) ? ? ? ? ? ? handleAvatarSuccess(res,file) { ? ? ? ? ? ? ? ? if (res.code === 0) { ? ? ? ? ? ? ? ? ? ? this.companyInfo.logo = res.filename; ? ? ? ? ? ? ? ? ? ? this.companyInfo.imageUrl = res.url; ? ? ? ? ? ? ? ? ? ? this.imageUrl = res.url; ? ? ? ? ? ? ? ? ? ?// this.handleCrop(file); ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? this.$message.error('上傳出錯(cuò)'); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }, ? ? ? ? ? ? //上傳圖片時(shí)會(huì)被調(diào)用 ? ? ? ? ? ? changePhotoFile(file, fileList){ ? ? ? ? ? ? ? ? if (fileList.length > 0) { ? ? ? ? ? ? ? ? ? ? this.photoList = [fileList[fileList.length - 1]] ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.handleCrop(file); ? ? ? ? ? ? }, ? ? ? ? ? ? //頭像上傳之前的方法 ? ? ? ? ? ? beforeAvatarUpload(file) { ? ? ? ? ? ? ? ? const isJPG = ? ? ? ? ? ? ? ? ? ? file.type === 'image/jpeg' || ? ? ? ? ? ? ? ? ? ? 'image/jpg' || ? ? ? ? ? ? ? ? ? ? 'image/gif' || ? ? ? ? ? ? ? ? ? ? 'image/png'; ? ? ? ? ? ? ? ? const isLt6M = file.size / 1024 / 1024 < 6; ? ? ? ? ? ? ? ? if (!isJPG) { ? ? ? ? ? ? ? ? ? ? this.$message.error( ? ? ? ? ? ? ? ? ? ? ? ? '上傳頭像圖片只能是 JPG、JPEG、GIF或PNG 格式!' ? ? ? ? ? ? ? ? ? ? ); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if (!isLt6M) { ? ? ? ? ? ? ? ? ? ? this.$message.error('上傳頭像圖片大小不能超過 6MB!'); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? console.log("275==",file) ? ? ? ? ? ? ? ? return isJPG && isLt6M; ? ? ? ? ? ? }, ? ? ? ? ? ? //返回上一步 ? ? ? ? ? ? returnBackFun(){ ? ? ? ? ? ? ? ? let obj = {formType:3} ? ? ? ? ? ? ? ? this.$emit("returnBackTwo",obj) ? ? ? ? ? ? } ? ? ? ? } ? ? } </script> <style scoped lang="less"> ? ? .form-out{ ? ? ? ? width: 1100px; ? ? ? ? border-radius: 10px; ? ? ? ? background: #fff; ? ? ? ? .form { ? ? ? ? ? ? padding: 40px 120px; ? ? ? ? ? ? margin: 0 auto; ? ? ? ? ? ? display: table; ? ? ? ? ? ? .tag { ? ? ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? ? ? margin: 0 0 40px 0; ? ? ? ? ? ? ? ? .tag-main{ ? ? ? ? ? ? ? ? ? ? display: inline-block; ? ? ? ? ? ? ? ? ? ? font-size:16px; ? ? ? ? ? ? ? ? ? ? font-family:PingFangSC-Semibold,PingFang SC; ? ? ? ? ? ? ? ? ? ? font-weight:600; ? ? ? ? ? ? ? ? ? ? color:#222222; ? ? ? ? ? ? ? ? ? ? padding: 0 10px ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? .slash { ? ? ? ? ? ? ? ? ? ? color: #437FFF; ? ? ? ? ? ? ? ? ? ? font-weight: bold; ? ? ? ? ? ? ? ? ? ? font-size: 16px; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? .light-slash { ? ? ? ? ? ? ? ? ? ? color: #437fff; ? ? ? ? ? ? ? ? ? ? font-weight: bold; ? ? ? ? ? ? ? ? ? ? font-size: 16px; ? ? ? ? ? ? ? ? ? ? opacity: 0.5; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? .com-name{ ? ? ? ? ? ? ? ? display: inline-block; ? ? ? ? ? ? ? ? /*width:224px;*/ ? ? ? ? ? ? ? ? height:22px; ? ? ? ? ? ? ? ? font-size:16px; ? ? ? ? ? ? ? ? font-family:PingFangSC-Regular,PingFang SC; ? ? ? ? ? ? ? ? font-weight:400; ? ? ? ? ? ? ? ? color:rgba(51,51,51,1); ? ? ? ? ? ? ? ? line-height:22px; ? ? ? ? ? ? } ? ? ? ? ? ? .avatar { ? ? ? ? ? ? ? ? width: 80px; ? ? ? ? ? ? ? ? height: 80px; ? ? ? ? ? ? ? /* ?border-radius: 30px;*/ ? ? ? ? ? ? ? ? vertical-align: middle; ? ? ? ? ? ? } ? ? ? ? ? ? .avatar-desc { ? ? ? ? ? ? ? ? color: #999; ? ? ? ? ? ? ? ? font-size: 12px; ? ? ? ? ? ? ? ? padding-left: 10px; ? ? ? ? ? ? } ? ? ? ? ? ? .tag-other { ? ? ? ? ? ? ? ? margin-top: 40px; ? ? ? ? ? ? } ? ? ? ? ? ? .submit { ? ? ? ? ? ? ? ? display: flex; ? ? ? ? ? ? ? ? justify-content: center; ? ? ? ? ? ? ? ? margin-top: 40px; ? ? ? ? ? ? ? ? .submit-button { ? ? ? ? ? ? ? ? ? ? background: #437FFF; ? ? ? ? ? ? ? ? ? ? width: 390px; ? ? ? ? ? ? ? ? ? ? margin-top: 20px; ? ? ? ? ? ? ? ? ? ? font-size: 22px; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? .next-button{ ? ? ? ? ? ? ? ? ? ? width:140px; ? ? ? ? ? ? ? ? ? ? height:42px; ? ? ? ? ? ? ? ? ? ? border-radius:6px; ? ? ? ? ? ? ? ? ? ? font-size:16px; ? ? ? ? ? ? ? ? ? ? color: #999999; ? ? ? ? ? ? ? ? ? ? border: 1px solid transparent; ? ? ? ? ? ? ? ? ? ? font-family:PingFangSC-Regular,PingFang SC; ? ? ? ? ? ? ? ? ? ? font-weight:400; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? .return-back{ ? ? ? ? ? ? ? ? ? ? display: inline-block; ? ? ? ? ? ? ? ? ? ? height:42px; ? ? ? ? ? ? ? ? ? ? line-height: 42px; ? ? ? ? ? ? ? ? ? ? width:70px; ? ? ? ? ? ? ? ? ? ? font-size:14px; ? ? ? ? ? ? ? ? ? ? font-family:PingFangSC-Medium,PingFang SC; ? ? ? ? ? ? ? ? ? ? font-weight:500; ? ? ? ? ? ? ? ? ? ? color:rgba(102,102,102,1); ? ? ? ? ? ? ? ? ? ? margin-left: 50px; ? ? ? ? ? ? ? ? ? ? &:hover{ ? ? ? ? ? ? ? ? ? ? ? ? cursor: pointer; ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? .next-button-bg-grew{ ? ? ? ? ? ? ? ? ? ? background:#E5E5E5; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? .next-button-bg-blue{ ? ? ? ? ? ? ? ? ? ? background:#437FFF; ? ? ? ? ? ? ? ? ? ? color:#FFFFFF ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? } </style> <style scoped> ? ? .el-input__inner { ? ? ? ? width:540px; ? ? ? ? height:42px; ? ? ? ? background:rgba(249,249,249,1); ? ? ? ? border-radius:2px; ? ? ? ? border: 1px solid transparent; ? ? } ? ? .el-form-item__label{ ? ? ? ? font-size:16px; ? ? ? ? font-family:PingFangSC-Regular,PingFang SC; ? ? ? ? font-weight:400; ? ? ? ? color:#222222; ? ? } ? ? input::-webkit-input-placeholder { ? ? ? ? height:21px; ? ? ? ? font-size:15px; ? ? ? ? font-weight:400; ? ? ? ? color:rgba(204,204,204,1); ? ? ? ? line-height:21px; ? ? } ? ? input::-ms-input-placeholder { ? ? ? ? height:21px; ? ? ? ? font-size:15px; ? ? ? ? font-weight:400; ? ? ? ? color:rgba(204,204,204,1); ? ? ? ? line-height:21px; ? ? } ? ? .my-icon-plus{ ? ? ? ? background: url("../../../assets/img/upload/upload_plus.png") no-repeat; ? ? ? ? background-size: 24px 24px; ? ? ? ? width: 24px; ? ? ? ? height: 24px; ? ? ? ? display: inline-block; ? ? } ? ? .my-icon-word{ ? ? ? ? height:17px; ? ? ? ? font-size:12px; ? ? ? ? font-family:PingFangSC-Regular,PingFang SC; ? ? ? ? font-weight:400; ? ? ? ? color:#437FFF; ? ? ? ? line-height:17px; ? ? } </style> <style > ? ? .form-out .avatar-uploader .el-upload { ? ? ? ? /*border: 1px dashed #d9d9d9;*/ ? ? ? ? border: 1px dashed #437FFF; ? ? ? ? border-radius: 6px; ? ? ? ? cursor: pointer; ? ? ? ? position: relative; ? ? ? /* ?overflow: hidden;*/ ? ? } ? ? .form-out .avatar-uploader .el-upload:hover { ? ? ? ? border-color: #409EFF; ? ? } ? ? .form-out .avatar-uploader-icon { ? ? ? ? font-size: 28px; ? ? ? ? color: #8c939d; ? ? ? ? width: 80px; ? ? ? ? height: 80px; ? ? ? ? text-align: center; ? ? ? ? display: flex; ? ? ? ? align-items: center; ? ? ? ? justify-content: center; ? ? } ? ? .form-out .avatar { ? ? ? ? width: 80px; ? ? ? ? height: 80px; ? ? ? ? display: block; ? ? } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element前端應(yīng)用開發(fā)之組織機(jī)構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容,介紹組織機(jī)構(gòu)和角色管理模塊的處理,使得我們了解界面組件化模塊的開發(fā)思路和做法,提高我們界面設(shè)計(jì)的技巧,并減少代碼的復(fù)雜性,提高界面代碼的可讀性,同時(shí)也是利用組件的復(fù)用管理。2021-05-05vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果
這篇文章主要介紹了vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果,本文分步驟通過實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue.js頁面加載執(zhí)行created,mounted的先后順序說明
這篇文章主要介紹了vue.js頁面加載執(zhí)行created,mounted的先后順序說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)
這篇文章主要介紹了ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式
這篇文章主要介紹了vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式,樣式使用的是vux的cell組件,需要的朋友可以參考下2017-07-07詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法
這篇文章主要介紹了詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法,如果后端接口尚未開發(fā)完成,前端開發(fā)一般使用mock數(shù)據(jù)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05