资源-上传修改

This commit is contained in:
lyc 2024-07-26 09:43:59 +08:00
parent e221bedb81
commit 5fea7e094d
5 changed files with 45 additions and 20 deletions

View File

@ -12,6 +12,7 @@ asarUnpack:
- resources/** - resources/**
win: win:
executableName: AIx executableName: AIx
icon: resources/logo.ico
nsis: nsis:
oneClick: false oneClick: false
allowToChangeInstallationDirectory: true allowToChangeInstallationDirectory: true

View File

@ -12,6 +12,7 @@ asarUnpack:
- resources/** - resources/**
win: win:
executableName: AIx executableName: AIx
icon: resources/logo.ico
nsis: nsis:
oneClick: false oneClick: false
allowToChangeInstallationDirectory: true allowToChangeInstallationDirectory: true

BIN
resources/logo.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB

View File

@ -4,11 +4,12 @@
<el-form> <el-form>
<el-form-item label="文件"> <el-form-item label="文件">
<div class="create-item file-item flex"> <div class="create-item file-item flex">
<el-upload :file-list="fileList" :show-file-list="false" :auto-upload="false" multiple <el-upload :file-list="fileList" :limit="limit" :show-file-list="false" :auto-upload="false" multiple
:on-change="hanleFileChange"> :on-change="hanleFileChange">
<el-button slot="trigger">选择文件</el-button> <el-button slot="trigger">选择文件</el-button>
</el-upload> </el-upload>
<span class="upload-desc">说明一次最多上传5个文件单个文件大小不能大于100M</span> <span class="upload-desc">说明一次最多上传{{ limit }}个文件单个文件大小不能大于100M</span>
<span class="upload-desc">仅支持图片音频视频wordpptpdftxtzip文件</span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -16,14 +17,15 @@
<div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid"> <div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
<div class="file-name"> <div class="file-name">
<span class="name">标题</span> <span class="name">标题</span>
<FileImage :fileName="item.name" :size="50"/> <FileImage :fileName="item.name" :size="50" />
<el-input class="file-input" v-model="item.fileData.name" placeholder="请输入文件名" /> <el-input class="file-input" v-model="item.fileData.name" placeholder="请输入文件名" />
<span>.{{ getFileSuffix(item.name) }}</span> <span>.{{ getFileSuffix(item.name) }}</span>
</div> </div>
<div class="flex-type flex"> <div class="flex-type flex">
<span class="name">类别</span> <span class="name">类别</span>
<el-select v-model="item.fileData.fileFlag" placeholder="Select" style="width: 100px"> <el-select v-model="item.fileData.fileFlag" placeholder="Select" style="width: 100px">
<el-option v-for="item in resourceType" :key="item.alue" :label="item.label" :value="item.value" /> <el-option v-for="el in resourceType" :key="el.alue" :label="el.label" :value="el.value"
:disabled="checkFile(el, item)" />
</el-select> </el-select>
</div> </div>
@ -58,6 +60,7 @@ const props = defineProps({
}, },
}) })
const dialogValue = ref(false) const dialogValue = ref(false)
const limit = ref(5)
// emit // emit
const emit = defineEmits(['update:modelValue', 'submitFile']) const emit = defineEmits(['update:modelValue', 'submitFile'])
// //
@ -68,7 +71,7 @@ watch(() => props.modelValue, (newVal) => {
}) })
const hanleFileChange = (file) => { const hanleFileChange = (file) => {
console.log(file) console.log(file)
// //
const audioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/aac'] const audioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/aac']
@ -81,9 +84,9 @@ const hanleFileChange = (file) => {
// pdf // pdf
const pdfTypes = ['application/pdf'] const pdfTypes = ['application/pdf']
// zip // zip
const zipTypes = ['application/x-zip-compressed','application/x-compressed'] const zipTypes = ['application/x-zip-compressed', 'application/x-compressed']
// //
const imgTypes = ['image/jpeg','image/gif', 'image/png'] const imgTypes = ['image/jpeg', 'image/gif', 'image/png']
// text // text
const textTypes = ['text/plain'] const textTypes = ['text/plain']
@ -93,22 +96,39 @@ const hanleFileChange = (file) => {
return false return false
} }
// //
// B < KB < MB < GB
// file.raw.size B
const fileSize = file.raw.size / 1024 / 1024 > 100 const fileSize = file.raw.size / 1024 / 1024 > 100
if (fileSize) { if (fileSize) {
ElMessage.error('文件大小错误! 请上传小于100M的文件!') ElMessage.error('文件大小错误! 请上传小于100M的文件!')
return false return false
} }
if (file.status === 'ready') { if (file.status === 'ready') {
// fileData // fileData
file.fileData = { file.fileData = {
fileFlag: '课件', fileFlag: '素材',
name: getFileName(file.name), name: getFileName(file.name),
} }
fileList.value.push(file) fileList.value.push(file)
console.log(fileList.value)
} }
} }
//
const checkFile = (item, file) => {
const type = file.raw.type
const pptTypes = ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']
let isPpt = pptTypes.includes(type)
if(!isPpt && item.value == '教案'){
return true
}
else{
return false
}
}
// //
const delFile = (index) => { const delFile = (index) => {
fileList.value.splice(index, 1) fileList.value.splice(index, 1)
@ -133,7 +153,7 @@ const submitFile = () => {
item.fileData.fileShowName = item.fileData.name + '.' + suffix item.fileData.fileShowName = item.fileData.name + '.' + suffix
delete item.fileData.name delete item.fileData.name
}) })
emit('submitFile',fileList.value) emit('submitFile', fileList.value)
closeDialog() closeDialog()
} }
@ -203,24 +223,28 @@ const submitFile = () => {
} }
} }
} }
.file-input { .file-input {
border-bottom: solid #dfdfdf 1px; border-bottom: solid #dfdfdf 1px;
&:hover { &:hover {
border-color: #409EFF; border-color: #409EFF;
} }
&:focus{
&:focus {
border-color: #409EFF; border-color: #409EFF;
} }
} }
:deep(.el-input__wrapper){ :deep(.el-input__wrapper) {
box-shadow: none
}
:deep(.el-input__wrapper.is-focus){
box-shadow: none
}
:deep(.el-input__wrapper:hover){
box-shadow: none box-shadow: none
} }
:deep(.el-input__wrapper.is-focus) {
box-shadow: none
}
:deep(.el-input__wrapper:hover) {
box-shadow: none
}
</style> </style>

View File

@ -71,7 +71,6 @@ const submitFile = (data) => {
item.fileData = fileData item.fileData = fileData
item.callback = fileCallBack item.callback = fileCallBack
}) })
// console.log(fileList)
uploaderState().pushFile(fileList) uploaderState().pushFile(fileList)
} }