<template>
|
<div>
|
<svg-icon v-if="!image" name="image_empty"
|
width="100" height="100" style=" margin: 5px"
|
color=""/>
|
<el-image v-else
|
style="width: 100px; height: 100px; margin: 5px"
|
:src="image"
|
:preview-src-list="[image]"
|
:zIndex="1000"
|
fit="cover"
|
disabled
|
/>
|
<el-upload class="upload-demo"
|
action
|
accept=".jpeg,.jpg,.png"
|
:http-request="doUpload"
|
:headers="uploadHeaders"
|
:show-file-list="false"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
:before-upload="beforeUpload">
|
<el-button size="small" :icon="icon.Upload">
|
{{ $t('button.Upload') }}
|
</el-button>
|
</el-upload>
|
</div>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs} from "vue";
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
import {UploadFileToFastDFS} from "@/api/common";
|
import * as elementplus from "element-plus";
|
|
export default {
|
name: "AvatarUploadExt",
|
components: {},
|
props: {
|
image: null,
|
successCallBack: null
|
},
|
setup(props) {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
staticDomain: WGURL.staticDomain,
|
uploadHeaders: [{'Authorization': localStorage.getItem('Authorization')}],
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
|
};
|
|
const doUpload = (fileObject) => {
|
let fd = new FormData()
|
fd.append('file', fileObject.file);
|
|
UploadFileToFastDFS(fd).then(resp => {
|
if (resp) {
|
if (resp.data && resp.data.code !== 200) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.' + resp.data.message)}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'error',
|
}
|
);
|
} else {
|
props.successCallBack(resp.data.data.linkurl);
|
}
|
}
|
});
|
};
|
|
const handleUploadSuccess = (res, file) => {
|
|
};
|
const beforeUpload = (file) => {
|
const isJPG = file.type === 'image/jpeg';
|
const isPNG = file.type === 'image/png';
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isJPG && !isPNG) {
|
proxy.$message.error(proxy.$t('message.MSG_ERROR_UPLOAD_FILE_FORMAT_INVALID'))
|
}
|
if (!isLt2M) {
|
proxy.$message.error(proxy.$t('message.MSG_ERROR_UPLOAD_FILE_SIZE_INVALID'));
|
|
return false;
|
}
|
|
return true;
|
};
|
const handleUploadError = (res, file) => {
|
proxy.$message.error(res);
|
};
|
|
return {
|
...toRefs(state),
|
props,
|
icon,
|
doUpload,
|
handleUploadSuccess,
|
beforeUpload,
|
handleUploadError,
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
