上传七牛云，回显链接

前端获取七牛云token，图片上传七牛云链接回显
七牛云存储区域

<template>
	<div class="container">
		<div class="resume-box">
			<div><img src="https://image.soole.com.cn/banner/2020-02-15-05-43-27.png" alt=""></div>
			<div>
				<ul>
					<li class="text-input">
						<div>姓名：</div>
						<div><input type="text" name='userName' v-model="fromData.userName" /></div>
					</li>
					<li class="text-input">
						<div>年龄：</div>
						<div><input type="text" name="ages" v-model="fromData.ages" /></div>
					</li>
					<li class="text-input">
						<div>地址：</div>
						<div><input type="text" name="address" v-model="fromData.address" /></div>
					</li>
					<li class="text-input">
						<div>手机：</div>
						<div><input type="text" name="phone" v-model="fromData.phone" /></div>
					</li>
					<li class="img-input">
						<div>照片：</div>
						<div>
							<el-upload class="avatar-uploader" :action="domain" :data="QiniuData" :show-file-list="false" :on-success="uploadSuccess"
							 :before-upload="beforeAvatarUpload">
								<img :src="fromData.headImage ? fromData.headImage : 'https://image.soole.com.cn/banner/2020-02-15-05-43-12.png'"
								 class="avatar">
							</el-upload>
						</div>
					</li>
					<li class="textarea-input">
						<div>简介：</div>
						<div><textarea rows="10" cols="30" name="introduce" v-model="fromData.introduce"></textarea>
							<div :class="{colRed:fromData.introduce.length>100}">{{fromData.introduce.length}}/100汉字</div>
						</div>
					</li>
					<li class="btn-blue">
						<div @click="handleSubmit()">提交</div>
					</li>
				</ul>
			</div>
		</div>
		<span v-show='false'><input type="file" ref="inputFile" /></span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fromData: {
					userId: '0', //用户id
					userName: '', //姓名
					address: '', //地址
					ages: '', //年龄
					phone: '', //电话
					headImage: '', //头像
					introduce: '', //介绍
				},
				token: '',
				loading: false,
				QiniuData: {
					key: "", //图片名字处理
					token: "", //七牛云token		  
				},
				domain: "https://upload.qiniup.com", // 七牛云的上传地址（华南区）
				qiniuaddr: "", // 七牛云的图片外链地址
				fileList: []
			}
		},
		mounted() {
			this.getQiniuToken();
		},
		methods: {
			beforeAvatarUpload(file) {
				const isPNG = file.type === "image/png";
				const isJPEG = file.type === "image/jpeg";
				const isJPG = file.type === "image/jpg";
				// const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isPNG && !isJPEG && !isJPG) {
					this.$notify.error({
						message: '上传头像图片只能是 jpg、png、jpeg 格式!',
						duration: 1000
					});
					return false;
				}
				//  if (!isLt2M) {
				// this.$notify.error({message: '上传头像图片大小不能超过 2MB!',duration: 1000});
				// return false;
				//  }
				this.QiniuData.key = `upload_pic_${file.name}`;
			},
			uploadSuccess(response, file, fileList) {
				this.fromData.headImage = `${this.qiniuaddr}/${response.key}`;
				console.log(this.fromData.headImage)
			},
			uploadError(err, file, fileList) {
				this.$notify.error({
					title: '异常',
					message: '上传出错，请重试！',
					duration: 2000
				});
			},
			//提交数据到后台
			handleSubmit() {
				
			},
			//请求后台拿七牛云token
			getQiniuToken() {
				this.$axios.post(this.$api.getQiNiuToken)
					.then((res) => {
						this.token = res.data.data;
						this.QiniuData.token = res.data.data;
					}).catch(function(error) {
						console.log(error);
					});
			}
		}
	}
</script>

<style scoped>
	ul {
		margin: 20px 0 0 0;
		padding: 0;
	}

	input[type=text]:focus,
	select:focus,
	textarea:focus {
		border: 1px solid #3879d9;
		outline: none;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.container>div>img,
	.img-input img {
		width: 100%;
	}

	.resume-box>div>img {
		width: 96%;
	}

	.container>div:first-child,
	.resume-box>div:first-child,
	.container>div:last-child {
		font-size: 0;
		overflow: hidden;
	}

	.resume-box {
		background-image: url('https://image.soole.com.cn/banner/2020-02-15-05-42-25.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.resume-box>div {
		width: 90%;
		margin: 0 auto;
	}



	li {
		overflow: hidden;
		display: flex;
		padding-left: 20px;
		align-items: baseline;
		line-height: 50px;
	}

	li>div {
		float: left;
	}

	li>div:first-child {
		width: 60px;
		line-height: 28px;
		font-size: 15px;
		color: #fff;
	}

	li>div:last-child {
		width: 70%;
	}

	.text-input>div:last-child>input,
	.select-input>div:last-child>select {
		width: 100%;
		height: 27px;
		border-radius: 4px;
		background: #2F885A;
		border: 1px solid #fff;
		font-size: 16px;
		color: #fff;
	}

	/* 头像框 */
	.avatar-uploader {
		width: 90px;
		border-radius: 4px;
		background: #2F885A;
		;
		font-size: 16px;
		color: #fff;
	}

	.resume-box .textarea-input textarea {
		width: 100%;
		height: 150px;
		border-radius: 4px;
		background: #2F885A;
		border: 1px solid #fff;
		font-size: 16px;
		color: #fff;
	}

	.resume-box .img-input,
	.resume-box .textarea-input {
		align-items: end;
	}

	.resume-box .img-input {
		margin-top: 10px;
		margin-bottom: 17px;
	}

	.textarea-input>div:last-child {
		color: #fff;
		font-size: 13px;
		line-height: 18px;
		text-align: right;
	}

	.resume-box .btn-blue {
		display: flex;
		justify-content: center;
		align-items: baseline;
	}

	.resume-box .btn-blue>div {
		width: 230px;
		height: 50px;
		color: #F6FAF8;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url('https://image.soole.com.cn/banner/2020-02-15-05-43-01.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 30px;
		font-size: 19px;
	}

	.option:after {
		background: red;
	}

	.colRed {
		color: #c7254e;
	}
</style>