Skip to content

fix: 导入恢复限制文件数量 #7045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 14, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions frontend/src/components/upload/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,15 @@
<div class="mb-4" v-if="type === 'website'">
<el-alert :closable="false" type="warning" :title="$t('website.websiteBackupWarn')"></el-alert>
</div>
<el-upload ref="uploadRef" drag :on-change="fileOnChange" class="upload-demo" :auto-upload="false">
<el-upload
:limit="1"
ref="uploadRef"
drag
:on-exceed="handleExceed"
:on-change="fileOnChange"
class="upload-demo"
:auto-upload="false"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
{{ $t('database.dropHelper') }}
Expand Down Expand Up @@ -48,7 +56,7 @@
</div>
</template>
</el-upload>
<el-button :disabled="isUpload" v-if="uploaderFiles.length === 1" icon="Upload" @click="onSubmit">
<el-button :disabled="isUpload || uploaderFiles.length !== 1" icon="Upload" @click="onSubmit">
{{ $t('commons.button.upload') }}
</el-button>

Expand Down Expand Up @@ -128,7 +136,7 @@
import { reactive, ref } from 'vue';
import { computeSize } from '@/utils/util';
import i18n from '@/lang';
import { UploadFile, UploadFiles, UploadInstance } from 'element-plus';
import { UploadFile, UploadFiles, UploadInstance, genFileId } from 'element-plus';
import { File } from '@/api/interface/file';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { BatchDeleteFile, CheckFile, ChunkUploadFileData, GetUploadList } from '@/api/modules/files';
Expand Down Expand Up @@ -280,6 +288,13 @@ const handleClose = () => {
upVisible.value = false;
};
const handleExceed: UploadProps['onExceed'] = (files) => {
uploadRef.value!.clearFiles();
const file = files[0] as UploadRawFile;
file.uid = genFileId();
uploadRef.value!.handleStart(file);
};
const onSubmit = async () => {
if (uploaderFiles.value.length !== 1) {
return;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码使用antd的文件上传组件实现,主要是进行了一些基本的逻辑处理和样式设置。

  1. 在上传成功前,需要展示警告信息。
    import { UploadFile, UploadFiles, UploadInstance } from 'element-plus';
    这是引入的依赖部分。这里使用element-ui的元素工具库中的一个API Upload,可以将文件按多个批次上传。

  2. 操作时需控制按钮是否显示或隐藏。
    ```
    import { UploadFile, UploadFiles, UploadInstance, genFileId } from 'element-plus';

以上这些都是一些基础的操作方法,没有明显的缺点或者问题,在实际操作中不需要进行额外的修正。但如果有更复杂的业务需求,可能还需要对上传流程有更深的理解来进一步改进代码质量和性能。比如针对一些特定场景设计更加灵活且可扩展性强的方法,根据项目需求重新组织模块等。对于具体的细节问题或优化建议,我会推荐具体到每个部分来进行深入分析。

Expand Down
Loading