CZO_Boss/src/components/Upload/index.vue

<template>
	<div class="upload">
		<div class="upload-box" @click="choiceFile" v-loading="loading">
			<div class="upload-btn" v-if="src == ''">
				<i class="el-icon-upload"></i>
				<span class="upload-text">点击选择文件</span>
				<span><small>允许上传格式:jpg/png/gif,文件大小不超过5M</small></span>
			</div>
			<div class="upload-show" v-else>
				<img :src="src" alt="" />
			</div>
		</div>
		<input type="file" name="file" ref="file" :multiple="multiple" @change="getFile" style="display: none" :accept="accept" />
	</div>
</template>

<script>
	import upload from '@/utils/oss.js'
	export default {
		data() {
			return {
				url: '',
				src: '',
				multiple: false,
				loading: false,
				accept: 'image/jpg,image/jpeg,image/png,image/gif'
			}
		},
		methods: {
			choiceFile() {
				//this.loading = true
				this.$refs.file.click()
			},
			getFile(e) {
				//this.loading = false
				let file = e.target.files[0]
				this.src = URL.createObjectURL(file)
				this.$emit('getFileInfo', file)
			},
			sub() {
				upload(this.files).then((res) => {
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.upload-box {
		width: 360px;
		height: 300px;
		user-select: none;
		-webkit-user-select: none;
		cursor: pointer;
		.upload-btn {
			width: 100%;
			height: 100%;
			border: 1px dashed #d9d9d9;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #666;
			.upload-text {
				display: inline-block;
				margin: 10px 0;
			}
			i {
				font-size: 50px;
				color: #c0c4cc;
			}
		}
		.upload-show {
			width: 100%;
			height: 100%;
			border: 1px solid #d9d9d9;
			padding: 10px;
			box-sizing: border-box;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>