5 changed files with 471 additions and 14 deletions
@ -0,0 +1,416 @@ |
|||||
|
<template ref="UploadImageOss"> |
||||
|
<div class="finish_room"> |
||||
|
<div class="finish_room2"> |
||||
|
<div :images="photo" v-if="show" class="finish_room_photo"> |
||||
|
<div :key="index" v-for="(item, index) in photo" class="room_img"> |
||||
|
<img :src="imgUrl + item" /> |
||||
|
<div v-if="!disabled" @click="deleteImg(index)" class="im-button"> |
||||
|
<div class="im-close"></div> |
||||
|
<div class="im-close1"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="photo.length < limit" v-loading="loading" class="room_add_img"> |
||||
|
<slot name="upload"></slot> |
||||
|
<input :disabled="disabled" @change="add_img" type="file" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import axios from "axios"; |
||||
|
import Setting from "~/setting"; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
UploadImageOssUrl: { |
||||
|
type: String, |
||||
|
default: "/upload/image", |
||||
|
}, |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: () => true, |
||||
|
}, |
||||
|
limit: { |
||||
|
type: Number, |
||||
|
default() { |
||||
|
return 1; |
||||
|
}, |
||||
|
}, |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default() { |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
isCompress: { |
||||
|
type: Boolean, |
||||
|
default() { |
||||
|
return false; |
||||
|
}, |
||||
|
}, |
||||
|
value: { |
||||
|
type: [String, Array, File, Blob], |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data: function () { |
||||
|
return { |
||||
|
photo: [], |
||||
|
previewList: [], |
||||
|
loading: false, |
||||
|
upLoadImgUrl: this.UploadImageOssUrl, |
||||
|
imgUrl: Setting.uplodBaseURL, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
photo() { |
||||
|
if (this.photo.length > 0) { |
||||
|
if (this.limit == 1) { |
||||
|
this.$emit("input", this.photo[0]); |
||||
|
} else { |
||||
|
this.$emit("input", this.photo); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
UploadImageOssUrl(val) { |
||||
|
this.upLoadImgUrl = val; |
||||
|
}, |
||||
|
value: { |
||||
|
immediate: true, |
||||
|
handler: function () { |
||||
|
if (typeof this.value == "string") { |
||||
|
if (this.value == "") { |
||||
|
this.photo = []; |
||||
|
} else { |
||||
|
this.photo = [this.value]; |
||||
|
} |
||||
|
} else if (this.value instanceof Array) { |
||||
|
this.photo = this.value; |
||||
|
} else { |
||||
|
try { |
||||
|
let fileReader = new FileReader(); |
||||
|
fileReader.readAsDataURL(this.value); |
||||
|
fileReader.onload = (e) => { |
||||
|
this.photo = [e.target.result]; |
||||
|
}; |
||||
|
} catch (e) { |
||||
|
console.log(e.message); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
deleteImg(index) { |
||||
|
this.photo.splice(index, 1); |
||||
|
if (this.limit == 1) { |
||||
|
this.$emit("input", ""); |
||||
|
} else { |
||||
|
this.$emit("input", this.photo); |
||||
|
} |
||||
|
this.$emit("update:value", null); |
||||
|
}, |
||||
|
compress(img) { |
||||
|
var url = null; |
||||
|
var canvas = document.createElement("canvas"); |
||||
|
var scale = img.height / img.width; |
||||
|
canvas.width = 720; |
||||
|
canvas.height = 720 * scale; |
||||
|
|
||||
|
var ctx = canvas.getContext("2d"); |
||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
||||
|
|
||||
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); |
||||
|
url = canvas.toDataURL("image/jpeg"); |
||||
|
return url; |
||||
|
}, |
||||
|
dataURItoBlob(dataURI) { |
||||
|
let byteString = window.atob(dataURI.split(",")[1]); |
||||
|
let mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0]; |
||||
|
let ab = new ArrayBuffer(byteString.length); |
||||
|
let ia = new Uint8Array(ab); |
||||
|
for (let i = 0; i < byteString.length; i++) { |
||||
|
ia[i] = byteString.charCodeAt(i); |
||||
|
} |
||||
|
return new window.Blob([ab], { type: mimeString }); |
||||
|
}, |
||||
|
add_img(event) { |
||||
|
let file = event.target.files[0]; |
||||
|
// /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/ |
||||
|
if (/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(event.target.value)) { |
||||
|
let MAXSIZE = 10 * 1024 * 1024; |
||||
|
let size = file.size; |
||||
|
if (size > MAXSIZE) { |
||||
|
event.target.value = ""; |
||||
|
this.$notify.error({ |
||||
|
title: "上传图片错误", |
||||
|
message: "上传图片不能超过10M", |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
this.loading = true; |
||||
|
let reader = new FileReader(); |
||||
|
let self = this; |
||||
|
reader.readAsDataURL(file); |
||||
|
let img = new Image(); |
||||
|
reader.onload = function (e) { |
||||
|
img.src = this.result; |
||||
|
img.onload = function () { |
||||
|
let base = e.target.result; |
||||
|
let fileItem = file; |
||||
|
if (self.isCompress) { |
||||
|
base = self.compress(img); |
||||
|
fileItem = self.dataURItoBlob(base); |
||||
|
} |
||||
|
|
||||
|
let formdata = new window.FormData(); |
||||
|
formdata.append("file", fileItem); |
||||
|
formdata.append("app_type", "pc"); |
||||
|
formdata.append("app_type_name", "PC"); |
||||
|
// formdata.append("path", "storeRegister"); |
||||
|
|
||||
|
// console.log(self.$store.state, "---"); |
||||
|
axios({ |
||||
|
method: "POST", |
||||
|
url: Setting.apiBaseURL + self.upLoadImgUrl, |
||||
|
data: formdata, |
||||
|
timeout: 1000000, |
||||
|
headers: { |
||||
|
"Content-Type": "multipart/form-data", |
||||
|
}, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
event.target.value = ""; |
||||
|
let data = JSON.parse(res.data); |
||||
|
let url = data.data.pic_path; |
||||
|
self.photo.push(url); |
||||
|
self.previewList.push(Setting.uplodBaseURL + url); |
||||
|
self.loading = false; |
||||
|
}) |
||||
|
.catch((e) => { |
||||
|
event.target.value = ""; |
||||
|
self.loading = false; |
||||
|
this.$message.error(e); |
||||
|
}); |
||||
|
}; |
||||
|
}; |
||||
|
} else { |
||||
|
event.target.value = ""; |
||||
|
this.$notify.error({ |
||||
|
title: "上传图片错误", |
||||
|
message: "请上传gif|jpg|jpeg|png|GIF|JPG|PNG格式图片", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
.finish_room { |
||||
|
/*width: 140px;*/ |
||||
|
/*height: 165px;*/ |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-flow: wrap; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 > div { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .margeImg { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img { |
||||
|
width: 152px; |
||||
|
height: 152px; |
||||
|
cursor: pointer; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
text-align: center; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
margin-right: 10px; |
||||
|
/* margin-left: 10px; */ |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img:before { |
||||
|
/*content: "";*/ |
||||
|
/*width: 0;*/ |
||||
|
/*height: 100%;*/ |
||||
|
/*!*background: #000;*!*/ |
||||
|
/*padding: 14px 18px;*/ |
||||
|
/*position: absolute;*/ |
||||
|
/*top: 0;*/ |
||||
|
/*left: 50%;*/ |
||||
|
/*opacity: 0;*/ |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img:hover:before { |
||||
|
width: 100%; |
||||
|
left: 0; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img .box-content { |
||||
|
width: 100%; |
||||
|
padding: 14px 18px; |
||||
|
color: #fff; |
||||
|
position: absolute; |
||||
|
top: 38%; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img .icon { |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style: none; |
||||
|
margin-top: -20px; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img .icon li { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img .icon li i { |
||||
|
display: block; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
border-radius: 50%; |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
color: #fff; |
||||
|
margin-right: 25px; |
||||
|
opacity: 0; |
||||
|
transform: translateY(50px); |
||||
|
transition: all 0.5s ease 0s; |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 990px) { |
||||
|
.finish_room2 .room_img { |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .deleteImg { |
||||
|
color: red; |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 80px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img img { |
||||
|
cursor: pointer; |
||||
|
width: 152px; |
||||
|
height: 152px; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 > .room_img span { |
||||
|
position: absolute; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
right: 5px; |
||||
|
bottom: 3px; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .im-button { |
||||
|
position: absolute; |
||||
|
top: -14px; |
||||
|
right: -18px; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
cursor: pointer; |
||||
|
border-radius: 50%; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img:hover .icon li i { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img:hover img { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .room_img:hover .im-button { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .im-close { |
||||
|
transform: rotate(-45deg); |
||||
|
line-height: 0px; |
||||
|
left: 6px; |
||||
|
bottom: 13px; |
||||
|
display: inline-block; |
||||
|
width: 15px; |
||||
|
height: 2px; |
||||
|
background: #fff; |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.finish_room2 .im-close1 { |
||||
|
left: 5px; |
||||
|
bottom: 13px; |
||||
|
display: inline-block; |
||||
|
width: 15px; |
||||
|
height: 2px; |
||||
|
background: #fff; |
||||
|
position: absolute; |
||||
|
transform: rotate(45deg); |
||||
|
} |
||||
|
|
||||
|
.room_add_img { |
||||
|
/* margin-top: 10px; |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
cursor: pointer; |
||||
|
border: 1px solid #e1e1e1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; */ |
||||
|
position: relative; |
||||
|
z-index: 10; |
||||
|
cursor: pointer; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
/* .room_add_img > span:nth-child(1) { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.room_add_img > span:nth-child(2) { |
||||
|
margin-bottom: 10px; |
||||
|
} */ |
||||
|
|
||||
|
.room_add_img input { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 99999; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue