chore: remove unused upload-avatar component
This commit is contained in:
@@ -1,155 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="upload-list" v-for="(item,index) in uploadList" :key="index">
|
|
||||||
<img :src="item.url">
|
|
||||||
<div class="upload-list-cover">
|
|
||||||
<Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Upload
|
|
||||||
ref="upload"
|
|
||||||
:multiple="false"
|
|
||||||
:show-upload-list="false"
|
|
||||||
:format="['jpg','jpeg','png','gif']"
|
|
||||||
:max-size="5120"
|
|
||||||
:on-format-error="handleFormatError"
|
|
||||||
:on-exceeded-size="handleMaxSize"
|
|
||||||
:before-upload="handleBeforeUpload"
|
|
||||||
type="drag"
|
|
||||||
action="dddd"
|
|
||||||
style="display: inline-block;width:58px;"
|
|
||||||
>
|
|
||||||
<div style="width: 58px;height:58px;line-height: 58px;">
|
|
||||||
<Icon type="md-camera" size="20"></Icon>
|
|
||||||
</div>
|
|
||||||
</Upload>
|
|
||||||
|
|
||||||
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
|
|
||||||
<img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;">
|
|
||||||
<div slot="footer">
|
|
||||||
<Button @click="viewImage=false">关闭</Button>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {findAliyunOssConfig} from '@/api/basic/basic-config'
|
|
||||||
import {update} from '@/api/sys/sys-user'
|
|
||||||
import OSS from 'ali-oss'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "upload-avatar",
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
userId: '',
|
|
||||||
avatar: '',
|
|
||||||
uploadList: [],
|
|
||||||
viewImage: false,
|
|
||||||
imgUrl: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleView(imgUrl) {
|
|
||||||
this.imgUrl = imgUrl;
|
|
||||||
this.viewImage = true;
|
|
||||||
},
|
|
||||||
handleFormatError(file) {
|
|
||||||
this.$Notice.warning({
|
|
||||||
title: "不支持的文件格式",
|
|
||||||
desc: "所选文件‘ " + file.name + " ’格式不正确, 请选择 .jpg .jpeg .png .gif图片格式文件"
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleMaxSize(file) {
|
|
||||||
this.$Notice.warning({
|
|
||||||
title: "文件大小过大",
|
|
||||||
desc: "所选文件‘ " + file.name + " ’大小过大, 不得超过 5M."
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleBeforeUpload(file) {
|
|
||||||
// 在Upload组件的钩子before-upload中获取到生成的参数信息
|
|
||||||
findAliyunOssConfig().then(res => {
|
|
||||||
let configValue = res.data.data.entity.configValue
|
|
||||||
let object = JSON.parse(configValue)
|
|
||||||
const client = new OSS({
|
|
||||||
accessKeyId: object.accessKeyId,
|
|
||||||
accessKeySecret: object.accessKeySecret,
|
|
||||||
region: object.region,
|
|
||||||
endpoint: object.endpoint,
|
|
||||||
bucket: object.bucketRead
|
|
||||||
})
|
|
||||||
|
|
||||||
let originalFilename = file.name
|
|
||||||
let temp = originalFilename.split('.')
|
|
||||||
let storeFilename = temp[0] + file.lastModified + '.' + temp[1]
|
|
||||||
let fileType = file.type
|
|
||||||
let fileSize = file.size
|
|
||||||
|
|
||||||
client.put(storeFilename, file).then((res) => {
|
|
||||||
let data = {
|
|
||||||
id: this.userId,
|
|
||||||
avatar: res.url
|
|
||||||
}
|
|
||||||
|
|
||||||
// 将上传文件信息保存至数据库
|
|
||||||
update(data).then(res => {
|
|
||||||
this.uploadList = [{url: data.avatar}]
|
|
||||||
this.$store.commit('setAvator', data.avatar)
|
|
||||||
this.$Message.success("头像更新成功!")
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
setData(userId, avatar) {
|
|
||||||
this.userId = userId
|
|
||||||
this.uploadList = [{url: avatar}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.upload-list {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 60px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #fff;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-list img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-list-cover {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-list:hover .upload-list-cover {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-list-cover i {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 2px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user