资源-上传修改
This commit is contained in:
parent
e221bedb81
commit
5fea7e094d
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 264 KiB |
|
@ -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">仅支持图片、音频、视频、word、ppt、pdf、txt、zip文件</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>
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue