欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解

 更新時(shí)間:2022年03月31日 11:38:34   作者:帥_帥  
這篇文章主要介紹了vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(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)和角色管理

    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-05
  • vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果

    vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果

    這篇文章主要介紹了vue使用swiper實(shí)現(xiàn)中間大兩邊小的輪播圖效果,本文分步驟通過實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下
    2019-11-11
  • vite中如何使用@?配置路徑別名

    vite中如何使用@?配置路徑別名

    這篇文章主要介紹了vite中如何使用@?配置路徑別名,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue項(xiàng)目運(yùn)行超詳細(xì)圖解

    vue項(xiàng)目運(yùn)行超詳細(xì)圖解

    這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目運(yùn)行的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09
  • 保姆級(jí)Vue3開發(fā)教程分享

    保姆級(jí)Vue3開發(fā)教程分享

    這篇Vue3開發(fā)文檔,包含了 Vue3 開發(fā)中使用的所有語法,文中的示例代碼講解詳細(xì),希望所有像他一樣還不熟的伙伴快速上手 Vue3,不會(huì)的再不看要遭老罪咯
    2023-04-04
  • Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法

    Vue開發(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-08
  • vue.js頁面加載執(zhí)行created,mounted的先后順序說明

    vue.js頁面加載執(zhí)行created,mounted的先后順序說明

    這篇文章主要介紹了vue.js頁面加載執(zhí)行created,mounted的先后順序說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • ElementUI中el-tree節(jié)點(diǎn)的操作的實(shí)現(xiàn)

    ElementUI中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-02
  • vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式

    vue+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ù)使用方法

    這篇文章主要介紹了詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法,如果后端接口尚未開發(fā)完成,前端開發(fā)一般使用mock數(shù)據(jù)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05

最新評(píng)論