<template>
<div class="uploadTest">
<div
class="wran-hasImg wran"
:style="{width:width+'px',height:height+'px'}"
v-show="!hasImg"
@click="add($event)"
>
<div class="add-wran">
<i class="iconfont icon-add action"></i>
</div>
</div>
<div v-show="hasImg" class="wran-hasNotImg wran" :style="{width:width+'px',height:height+'px'}">
<i class="iconfont icon-delete action" @click="del($event)"></i>
<img ref="curImg" class="curImg" :style="{width:width+'px',height:height+'px'}" />
<div class="mask"></div>
</div>
<input
ref="uploadDom"
type="file"
id="inputBox"
style="border:none;display:none;"
@change="selectImageURL"
accept="image/*"
/>
</div>
</template>
<script>
import Axios from "axios";
export default {
name: "upload", // 内饰
props: {
y: {
// 嵌套多张图片时的标记
type: Number,
default: 0
},
index: {
// 多张图片时的标记
type: Number,
default: 0
},
url: {
// 云服务地址
type: String,
default: "https://dev.huaweidun.com:812/api/Tools/WebUpload"
},
imgBackFlag: {
// 是否回显图片
type: Boolean,
default: false
},
propCurrentImg: {
// 传入图片地址
type: String,
default: ""
},
width: {
// 宽度
type: Number,
default: 100
},
height: {
// 高度
type: Number,
default: 100
},
maxSize: {
// 最大尺寸
// 可接收图片最大尺寸 单位 MB
type: Number,
default: 250
},
minSize: {
// 可接收最小尺寸
type: Number,
default: 0
},
//jpg，png，tif，gif
accept: {
type: Array,
default: () => ["jpg", "png", "gif"]
}
},
data() {
return {
hasImg: false,
currentImg: ""
};
},
created() {},
mounted() {
if (this.imgBackFlag && this.propCurrentImg != "") {
this.hasImg = this.imgBackFlag;
this.$refs.curImg.src = this.propCurrentImg;
}
},
watch: {
propCurrentImg(newV, oldV) {
if (this.imgBackFlag) {
this.hasImg = this.imgBackFlag;
if (this.propCurrentImg) {
this.$refs.curImg.src = this.propCurrentImg;
} else {
this.$refs.curImg.src = null;
this.$refs.uploadDom.value = "";
this.hasImg = false;
}
}
}
},
methods: {
add(e) {
if (this.hasImg) {
} else {
this.$refs.uploadDom.click();
}
},
del(e) {
this.$refs.curImg.src = null;
this.$refs.uploadDom.value = "";
this.hasImg = false;
this.$emit("on-delete", "内容已清空", this.index, this.y);
},
// 上传图片
selectImageURL(e) {
let file = e.target.files[0];
let fileName = e.target.value;
let fileType = fileName
.substring(fileName.lastIndexOf(".") + 1, fileName.length)
.toLowerCase();
if (this.accept.includes(fileType)) {
// console.log("该类型可以用 ", fileType);
this.sizeFormate(e, file, fileType);
} else {
this.$emit(
"on-format-error",
file,
"文件格式错误！当前格式" + fileType + "可接收类型",
JSON.stringify(this.accept),
this.index
);
this.$refs.uploadDom.value = "";
}
},
sizeFormate(e, file, fileType) {
// console.log("file ", file);
let fileSize = 0;
let bFomateMB = 1024 * 1024; //1M
if (file) {
fileSize = file.size;
// console.log("fileSize ", fileSize);
let curSizeMb = fileSize / bFomateMB;
// 判断当前 文件大小 是否大于 maxSize
if (curSizeMb > this.maxSize) {
// console.log("文件不能大于" + this.maxSize + "MB！");
this.$emit(
"on-exceeded-size",
file,
"上传文件不能大于" + this.maxSize + "MB",
this.index
);
this.$refs.uploadDom.value = "";
// 判断当前文件 大小 是否 小于0
} else if (curSizeMb <= 0) {
// console.log("文件大小不能为0MB！");
this.$emit("on-exceeded-size", file, "文件大小不能为0MB");
this.$refs.uploadDom.value = "";
} else {
/* 图片传输 部分 */
// param.append("chunk", "0"); // 添加form表单中其他数据
// console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers: { "Content-Type": "multipart/form-data" }
};
// 添加请求头
let img = new Image();
let timestamp = Date.parse(new Date());
Axios.get(this.url)
.then(res => {
// console.log("res ", JSON.stringify(res.data));
let param = new FormData(); // 创建form对象
param.append("name", file.name);
param.append(
"key",
`${res.data.dir}${file.name}${timestamp}.${fileType}`
);
param.append("policy", res.data.policy);
param.append("OSSAccessKeyId", res.data.accessid);
param.append("success_action_status", 200);
param.append("signature", res.data.signature);
param.append("callback", res.data.callback);
param.append("dir", res.data.dir);
param.append("file", file); // 通过append向form对象添加数据
let uploadUrl = res.data.host;
// console.log(uploadUrl, res.data.host)
let img = new Image();
Axios.post(uploadUrl, param)
.then(res2 => {
// console.log("res2222.data.imgUrl ", res2.data.imgUrl);
if (res2.data.status === "Ok") {
// console.log("res2.data.imgUrl ", res2.data.imgUrl);
let successImgUrl = res2.data.imgUrl;
this.$emit(
"on-success",
successImgUrl,
file,
this.index,
this.y
);
img.onload = () => {
this.hasImg = true;
console.log("this.hasImg ", this.hasImg);
this.$nextTick(() => {
console.log("this.$refs.curImg. ", this.$refs.curImg);
this.$refs.curImg.src = successImgUrl;
});
// this.$refs.curImg.src = successImgUrl;
img.onload = null;
};
img.src = successImgUrl;
}
})
.catch(err => {
// console.log(err);
});
})
.catch(res => {});
}
} else {
// console.log("文件不存在");
}
}
}
};
</script>
<style scoped lang="less">
@font-face {
font-family: "iconfont";
src: url("//at.alicdn.com/t/font_1744626_0tlyf9dhykx.eot?t=1586424643369"); /* IE9 */
src: url("//at.alicdn.com/t/font_1744626_0tlyf9dhykx.eot?t=1586424643369#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMUAAsAAAAABwwAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBdIFnATYCJAMMCwgABCAFhG0HNhstBsiemjzaRMtKisYAS5+VAHhDfrn2vs3mrikiKmD3gap4POu6GsESwTFoFvrMWLMU8IEcR6gnyaCK9mgPKJ007UyFc0/Gl4eH+73nvn8XBdYis42iOYs2rsBOLxvQzJLXGom1yXzi3mkTKJD5LMtljnH+qQswDiigsTZ1kRRIgt4wdsELPAwE8BAjC3W8fA2oTbJHEYCWksildiFMkiynEL1hYaIzlFHFvjgHsBB9n/5QEAoErcSe2Ln4HNDd18dXBE8Zu8YDEiTLOQGwZQADsgASaLIxPaiGGIN5qOvdpTqJiKVixpJIbCh15w8PEAionF3tBQDSkFF4KInHAwFfSJ+6mgGADrMdCEOYHlRItPrakLQ7bKzW9pYOXhS1PnP3tca7YB6+B9cJ6t610u8MumQeWhmOKwOq3u1Wex3sh1adzzfF3ht3sZpHbU1WT3lfbI1Dk2l9q97fJ7wQz7eP7KJv+b9F8aB8t40sRcLhYu+el+PgLBp2yEzO9Fo6PPt8i0q67SRn8iUnZdIFAw8Teyjvch2Rcco7XPGzf4NjMT61cfWvahIAvObVGIWMU4nhFVAEMMmvlQysk4bMtnBqYk9s5VgO7cZN8DB8MGD7A3xO1wffvpOogoRBcBMNpiSRJT0LGk9F0Cm18JCpdbmnQONqKKsAGeYBiJ91CD4OwPxckCX9A5oQ/9D5BcNDf+xs6CklhruPCtcQsGXBw76UoWuzblzbQzTLXc3LIuYIOk1inJ+TV869ooQuMWViHp1PWsgOlYJbwHHIc+FRlRS+HbvMJhe5uY6mFx1bpaCuRgpcBgLMYoEN84lSGDQ33crneyAyk3NpB6HOPwJqKmmf5cuRN4D8qi4HER7lmQlzkXOTTIg5KFFgLaAf5HKCjTb3S4HPHHNNSE5cyHUaOYaqj7fXFv+3BcCDvRtHEaVIPBMEzQA5DEQ=")
format("woff2"),
url("//at.alicdn.com/t/font_1744626_0tlyf9dhykx.woff?t=1586424643369")
format("woff"),
url("//at.alicdn.com/t/font_1744626_0tlyf9dhykx.ttf?t=1586424643369")
format("truetype"),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("//at.alicdn.com/t/font_1744626_0tlyf9dhykx.svg?t=1586424643369#iconfont")
format("svg"); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-add:before {
content: "\e81a";
}
.icon-delete:before {
content: "\e7b2";
}
.wran-hasImg {
position: relative;
border: 1px solid #ccc;
.add-wran {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
.icon-add {
font-size: 30px;
&:hover {
font-size: 35px;
cursor: pointer;
}
}
}
}
.wran-hasNotImg {
position: relative;
.curImg {
}
.icon-delete {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: rgb(255, 255, 255);
display: none;
}
&:hover .icon-delete {
display: block;
z-index: 99999;
}
&:hover .mask {
display: block;
opacity: 1;
}
.mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
}
.uploadTest {
cursor: pointer;
}
</style>
网友评论