<!-- 头像上传 -->
<div class="uploader-wrapper">
<el-upload
class="avatar-uploader"
:action="uploadFile.action"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:data="uploadFile.data" // 上传时附带的额外参数
>
<img v-if="editImageUrl" :src="editImageUrl" class="avatar">
<template v-else>
<i class="avatar-uploader-icon">
<span class="el-icon-plus uploader-icon"></span>
<br>支持jpg、jpeg、png、bmp格式,不要超过5M
</i>
</template>
</el-upload>
<a href="javascript:;" v-if="editImageUrl" class="deleteBtn" @click="deleteImg">
<span class="iconfont iconshanchu1"></span>
</a>
</div>
// 图片上传
uploadFile: {
action: "", //上传的路径
options: {}, //签名的返回值
url: "" //上传之后生成的url
}
// 上传成功
handleAvatarSuccess(res, file) {
this.editImageUrl = this.uploadFile.url;
},
// 上传成功钱
beforeAvatarUpload(file) {
const typeList = ["image/jpeg","image/png", "image/bmp" , "image/jpg"]
const isJPG =typeList.includes(file.type)
const isLt2M = file.size / 1024 / 1024 < 5;
console.log(file.type,isJPG)
if (!isJPG) {
this.$Message.error("上传头像图片只能是 JPG/JPEG/PNG/BMP 格式!");
}
if (!isLt2M) {
this.$Message.error("上传头像图片大小不能超过 5MB!");
}
// return isJPG && isLt2M;
if (isJPG && isLt2M) {
// console.log('s',file)
return new Promise((reslove, reject) => {
this.fsSignature(reslove,file);
});
} else {
return false;
}
},
// 上传请求
async fsSignature(reslove,file) {
let test = file.name.split('.')
let key = test[0]+'-'+file.lastModified+'.'+test[1];
this.$axios({
url: 'https://hq-storage.hqjy.com/api/signMapLog/expert',
method: 'post',
header: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json;charset=UTF-8',
'userToken': this.$factory.getcookiesInClient("token")
},
data: {
dir:'hangjiaPC-notice/image',
key,
}
}).then( res => {
let data = res.data
this.uploadFile.options = { ...data};
console.log(this.uploadFile.options)
this.uploadFile.action = data.host;
this.uploadFile.data = {
name: this.uploadFile.options.url.split("/").slice(-1),
key:
this.uploadFile.options.dir +
this.uploadFile.options.url.split("/").slice(-1),
policy: this.uploadFile.options.policy,
OSSAccessKeyId: this.uploadFile.options.accessid,
success_action_status: "200",
callback: this.uploadFile.options.callback,
signature: this.uploadFile.options.signature
};
this.uploadFile.url = this.uploadFile.options.url;
console.log("1",this.uploadFile)
reslove();
});
}
.uploader-wrapper {
position: relative;
width: 108px;
&:hover .deleteBtn{
display: block;
}
.deleteBtn {
width: 32px;
height: 28px;
background-color: #f73f62;
position: absolute;
color: #fff;
text-align: center;
border-radius: 4px;
left: 78px;
top: 0;
display: none;
}
}
.avatar-uploader {
margin-top: 30px;
.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 108px;
height: 108px;
// line-height: 108px;
line-height: 1.42;
font-size: 12px;
color: #6b7580;
display: inline-block;
text-align: center;
background-color: #f5f7fa;
.uploader-icon {
margin-top: 10px;
font-size: 22px;
}
}
.avatar {
width: 108px;
height: 108px;
display: block;
}
}
}
网友评论