125 lines
2.5 KiB
Vue
125 lines
2.5 KiB
Vue
<template>
|
|
<div class="imgUploadContainer">
|
|
<div class="imgUploadPanel">
|
|
<div class="upBtn" v-if="!value">
|
|
<label
|
|
for="imgUploadInput"
|
|
class="imgUploadInputArea"
|
|
@dragenter.stop.prevent
|
|
@dragover.stop.prevent
|
|
@drop.stop.prevent="onDrop"
|
|
>点击此处选择图片、或拖动图片到此</label
|
|
>
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
id="imgUploadInput"
|
|
@change="onImgUploadInputChange"
|
|
/>
|
|
</div>
|
|
<div v-if="value" class="uploadInfoBox">
|
|
<div
|
|
class="previewBox"
|
|
:style="{ backgroundImage: `url('${value}')` }"
|
|
></div>
|
|
<span class="delBtn el-icon-close" @click="deleteImg"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ImgUpload",
|
|
model: {
|
|
prop: "value",
|
|
event: "change",
|
|
},
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
file: null,
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2019-12-22 19:47:19
|
|
* @Desc: 图片选择事件
|
|
*/
|
|
onImgUploadInputChange(e) {
|
|
let file = e.target.files[0];
|
|
this.selectImg(file);
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2019-12-22 20:32:31
|
|
* @Desc: 拖动上传图片
|
|
*/
|
|
onDrop(e) {
|
|
let dt = e.dataTransfer;
|
|
let file = dt.files && dt.files[0];
|
|
this.selectImg(file);
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-06 16:56:14
|
|
* @Desc: 选择图片
|
|
*/
|
|
selectImg(file) {
|
|
this.file = file;
|
|
let fr = new FileReader();
|
|
fr.readAsDataURL(file);
|
|
fr.onload = (e) => {
|
|
this.$emit("change", e.target.result);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-22 23:03:46
|
|
* @Desc: 获取图片大小
|
|
*/
|
|
getSize() {
|
|
return new Promise((resolve, reject) => {
|
|
let img = new Image();
|
|
img.src = this.value;
|
|
img.onload = () => {
|
|
resolve({
|
|
width: img.width,
|
|
height: img.height,
|
|
});
|
|
};
|
|
img.onerror = (e) => {
|
|
resolve({
|
|
width: 0,
|
|
height: 0,
|
|
});
|
|
};
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-06 21:59:57
|
|
* @Desc: 删除图片
|
|
*/
|
|
deleteImg() {
|
|
this.$emit("change", "");
|
|
this.file = null;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "./style.less";
|
|
</style>
|