<template>
|
<div>
|
<el-scrollbar v-if="fileList&&fileList.length>0" max-height="200px">
|
<el-space wrap>
|
<el-card style="width: 250px; margin: 5px;"
|
v-for="(item, i) in fileList" :index="i + 1 + ''" :item="item">
|
<svg-icon v-if="!item.response" name="image_empty" width="100%" height="80" color=""/>
|
<el-image v-else style="width: 100%; height: 80px;" :src="item.response" :fit="'contain'"
|
:preview-src-list="[item.response]"
|
:zIndex="1000"/>
|
<div style="display: flex;justify-content: space-between">
|
<p class="text-overflow">
|
<svg-icon name="masterdata" width="23" height="23" color="var(--el-color-primary)"
|
style="margin-right: 5px;"/>
|
<b>{{ item.name }}</b>
|
</p>
|
<el-button link size="default" type="primary" :icon="icon.Remove"
|
@click="onRemoveFile(item.name)">
|
<p class="text-overflow">{{ $t('button.Remove') }}</p>
|
</el-button>
|
</div>
|
</el-card>
|
</el-space>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
</el-scrollbar>
|
<el-upload class="upload-demo" drag
|
v-model:file-list="fileList"
|
:action="uploadurl"
|
:headers="uploadHeaders"
|
multiple
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:on-error="handleAvatarError"
|
:before-upload="beforeAvatarUpload">
|
<div>
|
<!-- <el-icon class="el-icon--upload" style="height: 40px; width: 40px;">-->
|
<!-- <upload-filled/>-->
|
<!-- </el-icon>-->
|
<div class="el-upload__text">
|
{{ $t('message.DropFileHereOr') }} <em>{{ $t('message.ClickToUpload') }}</em>
|
</div>
|
</div>
|
<template #tip>
|
<div class="el-upload__tip">
|
{{ $t('message.FilesWithSizeLessThan') }} 2MB
|
</div>
|
</template>
|
</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 {getFileUploadUrl} from "@/api/common";
|
|
export default {
|
name: "FileUploadExt",
|
components: {},
|
props: {
|
files: null,
|
click: null
|
},
|
setup(props) {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
staticDomain: WGURL.staticDomain,
|
uploadHeaders: [{'Authorization': localStorage.getItem('Authorization')}],
|
fileList: [],
|
resultFileList: [],
|
uploadurl: '',
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
state.uploadurl = getFileUploadUrl();
|
|
if (props.files) {
|
state.fileList = [];
|
props.files.map(file => {
|
state.fileList.push({
|
name: file.name,
|
response: file.url
|
});
|
});
|
}
|
};
|
|
const onClick = () => {
|
if (props.click) {
|
props.click(props.item);
|
}
|
};
|
|
const onRemoveFile = (name) => {
|
if (state.fileList && state.fileList.length > 0) {
|
state.fileList = state.fileList.filter(e => e.name !== name);
|
}
|
};
|
|
const handleAvatarSuccess = (res, file) => {
|
|
};
|
const beforeAvatarUpload = (file) => {
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
proxy.$message.error('Avatar picture size can not exceed 2MB!');
|
|
return false;
|
}
|
|
return true;
|
};
|
const handleAvatarError = (res, file) => {
|
proxy.$message.error(res);
|
};
|
const exportValue = () => {
|
state.resultFileList = [];
|
state.fileList.map(file => {
|
state.resultFileList.push({
|
name: file.name,
|
url: file.response
|
});
|
});
|
|
return state.resultFileList;
|
}
|
|
return {
|
...toRefs(state),
|
props,
|
icon,
|
onClick,
|
onRemoveFile,
|
handleAvatarSuccess,
|
beforeAvatarUpload,
|
handleAvatarError,
|
exportValue,
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
