186 lines
4.4 KiB
Vue
186 lines
4.4 KiB
Vue
<template>
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="#"
|
|
:show-file-list="false"
|
|
:http-request="selectPicUpload"
|
|
:auto-upload="true"
|
|
:before-upload="beforeAvatarUpload"
|
|
name="multipartFile"
|
|
|
|
>
|
|
<img v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" />
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</template>
|
|
<script>
|
|
import axios from "axios";
|
|
import Vue from "vue";
|
|
|
|
export default {
|
|
name: "UploadComponent",
|
|
components: {},
|
|
props:{
|
|
configName:String,
|
|
},
|
|
data() {
|
|
return {
|
|
imageUrl: '',
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getImage(this.configName);
|
|
},
|
|
created() {
|
|
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
|
|
//上传图标事件
|
|
selectPicUpload(obj) {
|
|
|
|
let fd = new FormData(); //参数的格式是formData格式的
|
|
fd.append("multipartFile", obj.file); //参数
|
|
if (localStorage.getItem('userRole') === '0'&&localStorage.getItem('Authorization')) {
|
|
if(this.configName){
|
|
let _this = this;
|
|
axios({
|
|
method: 'post',
|
|
url: '/upload/uploadfile',
|
|
params:{
|
|
cate:'img',
|
|
name: this.configName,
|
|
},
|
|
data:fd,
|
|
}).then(function (res) {
|
|
if(res.data.code!==200){
|
|
Vue.prototype.$notify.error({
|
|
title: '错误',
|
|
message: "上传失败！",
|
|
offset: 0
|
|
});
|
|
|
|
}else {
|
|
Vue.prototype.$notify({
|
|
title: '成功',
|
|
message: ('i', {style: 'color: teal'}, "上传成功！"),
|
|
type: 'success',
|
|
offset: 0
|
|
});
|
|
_this.getImage(_this.configName);
|
|
}
|
|
}).catch((error) => {
|
|
// console.log(error)
|
|
// Vue.prototype.$notify.error({
|
|
// title: '错误',
|
|
// message: error,
|
|
// offset: 0
|
|
// });
|
|
})
|
|
}else{
|
|
return false;
|
|
}
|
|
|
|
|
|
} else {
|
|
Vue.prototype.$notify.error({
|
|
title: '错误',
|
|
message: '登录状态失效，请重新登录！',
|
|
offset: 0
|
|
});
|
|
}
|
|
},
|
|
getImage(name){
|
|
let _this=this;
|
|
if (localStorage.getItem('userRole') ==='0' && localStorage.getItem('Authorization')) {
|
|
if(name){
|
|
axios({
|
|
method: 'get',
|
|
url: '/api/getAttachment',
|
|
responseType: 'arraybuffer',
|
|
params: {
|
|
name:name
|
|
},
|
|
}).then(function (res) {
|
|
if(res!==undefined){
|
|
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
|
|
}else{
|
|
return false;
|
|
}
|
|
}).catch((error) => {
|
|
// Vue.prototype.$notify.error({
|
|
// title: '错误',
|
|
// message: error,
|
|
// offset: 0
|
|
// });
|
|
})
|
|
}else{
|
|
return false;
|
|
// Vue.prototype.$notify.error({
|
|
// title: '错误',
|
|
// message: "不存在！",
|
|
// offset: 0
|
|
// });
|
|
}
|
|
|
|
|
|
} else {
|
|
Vue.prototype.$notify.error({
|
|
title: '错误',
|
|
message: '登录状态失效，请重新登录！',
|
|
offset: 0
|
|
});
|
|
}
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isJPG = file.type === "image/jpeg";
|
|
const isJPG2 = file.type === "image/jpg";
|
|
const isPNG = file.type === "image/png";
|
|
// const isGif = file.type === "image/gif";
|
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
|
if (!isJPG && !isJPG2 && !isPNG) {
|
|
this.$message.warning("只支持jpg,png,jpeg,gif格式图片");
|
|
}
|
|
if (!isLt5M) {
|
|
this.$message.warning("请上传5MB以内的图片!");
|
|
}
|
|
return (isJPG || isJPG2 || isPNG) && isLt5M;
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed var(--theme-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: var(--theme-color);
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
|
|
|
|
</style> |