<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>
Element 手动上传图片
于 2022-06-17 17:30:14 首次发布