Element 手动上传图片

meng_xiaoxiao

已于 2022-07-17 14:58:36 修改

阅读量212

点赞数

分类专栏： Vue项目案例文章标签： elementui vue.js javascript

于 2022-06-17 17:30:14 首次发布

本文链接：https://blog.csdn.net/meng_xiaoxiao/article/details/125337567

版权

Vue项目案例专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<template>
	<el-card>
		<el-form>
			<el-form-item prop="logo" label="云店LOGO:">
				<el-upload action="#" :auto-upload="false" :on-change="beforeUpload" :show-file-list="false"
					accept=".BMP,.JPG,.JPEG,.PNG,.GIF">
					<i v-if='!body.logo' class="img-log logo-empty"></i>
					<img v-else class="img-log" :src="body.logo" />
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button @click="uploadFile">上传</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script setup>
	import { reactive } from "vue"	
	let fileTemp = undefined;
	const body = reactive({ logo: "" })

	function beforeUpload(file) {
		fileTemp = file.raw
		const fileReader = new FileReader();
		fileReader.readAsDataURL(file.raw);
		fileReader.onload = () => {
			body.logo = fileReader.result;
		};
	}

	function uploadFile() {
		let params = { type: 1, source: 1, image: fileTemp, }
		let url = '/basic/v3/upload/index'
		this.$http.post(url, params, that.$demain.base).then(resp => {
			if (resp.code === 200) {
				body.logo = resp.data.url;
				fileTemp = undefined;
			}
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/style/common.scss';

	.el-card {
		height: 100%;

		.img-log {
			width: $px88;
			height: $px88;
			border: $px1 dotted $border-color;
			border-radius: $px4;
		}

		.logo-empty {
			position: relative;

			&::before {
				position: absolute;
				top: calc(50% - $px2);
				left: calc(50% - $px20);
				display: block;
				content: "";
				height: $px4;
				width: $px40;
				background-color: $placeholder;
			}

			&::after {
				position: absolute;
				top: calc(50% - $px20);
				right: calc(50% - $px2);
				display: block;
				content: "";
				height: $px40;
				width: $px4;
				background-color: $placeholder;
			}

			&:hover {
				background-color: #C9C9C9;

				&::before {
					background-color: #fff;
				}

				&::after {
					background-color: #fff;
				}
			}
		}
	}
</style>