odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 修复上传文件功能

Browse Source
This commit is contained in:
odjbin
2024-05-12 16:34:10 +08:00
parent 72a8572910
commit 13774dada9
1 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/FileUpload.vue
View File

@@ -11,17 +11,19 @@
:before-upload="beforeUpload" :before-upload="beforeUpload"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
> >
<el-button color="#DED0B2">上传文件</el-button> <el-button color="#DED0B2" :loading="loading">上传文件</el-button>
</el-upload> </el-upload>
<div v-if="showTable||fileList.length!==0"> <div v-if="showTable||fileList.length!==0">
<el-table :data="fileList" style="width: 100%"> <el-table :data="fileList" style="width: 100%">
<el-table-column fixed prop="originalFilename" label="文件名" /> <el-table-column prop="originalFilename" label="文件名"/>
<el-table-column fixed prop="fileType" label="文件类型" /> <el-table-column prop="fileType" label="文件类型"/>
<el-table-column fixed prop="size" label="文件大小" > <el-table-column prop="size" label="文件大小">
<template #default="scope"> <template #default="scope">
{{parseInt(scope.row.size/1024)}}{{parseInt(scope.row.size/1024)>1024?'MB':'KB'}} {{ parseInt(scope.row.size / 1024) }}KB
<!-- {{ parseInt(scope.row.size / 1024) > 1024 ? 'MB' : 'KB' }}-->
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column prop="tag" label="标签"/>-->
<el-table-column fixed="right" label="操作"> <el-table-column fixed="right" label="操作">
<template #default="scope"> <template #default="scope">
<a :href="scope.row.url"> <a :href="scope.row.url">
@@ -32,7 +34,8 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table></div> </el-table>
</div>
</template> </template>
<script setup> <script setup>
@@ -47,6 +50,7 @@ const headers = reactive({
authorization: getToken() authorization: getToken()
}) })
const disabled = ref(false) const disabled = ref(false)
const loading = ref(false)
const showTable = ref(false) const showTable = ref(false)
const uploadParams = ref({}) const uploadParams = ref({})
const props = defineProps({ const props = defineProps({
@@ -74,20 +78,25 @@ const _value = computed({
}) })
const beforeUpload = (file) => { const beforeUpload = (file) => {
const FileExt = file.name.replace(/.+\./, ""); // const FileExt = file.name.replace(/.+\./, "");
if (['zip', 'rar','pdf','doc','docx','xlsx'].indexOf(FileExt.toLowerCase()) === -1){ // if (['zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
ElMessage.warning('请上传后缀名为pdf、doc、docx、xlsx、zip或rar的文件！'); // ElMessage.warning('请上传后缀名为pdf、doc、docx、xlsx、zip或rar的文件！');
return false; // return false;
} else if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) { // } else
ElMessage.warning(`每个文件最大不超过 ${props.maxSize}MB`) // if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
} else { // ElMessage.warning(`每个文件最大不超过 ${props.maxSize}MB`)
// } else {
loading.value=true
return true return true
} // }
} }
const handleUploadSuccess = (res, file) => { const handleUploadSuccess = (res, file) => {
if (res.code !== 1000) { if (res.code !== 1000) {
loading.value=false
ElMessage.error("上传失败") ElMessage.error("上传失败")
} else { } else {
loading.value=false
ElMessage.success("上传成功") ElMessage.success("上传成功")
} }
showTable.value = true showTable.value = true