【el-upload】批量上传图片时在before-upload中添加弹窗判断时的踩坑记录

Komorebi゛2023-08-11 12:59

一、初始代码

1. 初始使用组件代码片段

html 复制代码 
<!-- 上传 -->
<DialogUploadFile ref="uploadFile" @success="refresh" />
js 复制代码 
// 上传
const uploadHandle = () => {
    if (selections.value.length != 1) {
        onceMessage.warning('请选择一条数据操作')
        return
    }
    uploadFile.value.show(selections.value[0])
}

2. 上传组件初始代码 DialogUploadFile.vue

html 复制代码 
<template>
    <div class="no-modal-dialog">
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px" :close-on-click-modal="false">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="title">选择附件</div>
                    <el-upload
                        class="upload-box"
                        multiple
                        :show-file-list="false"
                        :accept="fileTypes"
                        :before-upload="beforeUpload"
                        :drag="true"
                        @drop.native="e => beforeUploadHandler(e.dataTransfer.files)"
                    >
                        <div>
                            <el-button type="primary">点击选择附件</el-button>
                            <p class="el-upload__text">或将附件拖到这里</p>
                            <p class="el-upload__text">请上传pdf、pptx、ppt、docx、doc、zip、mp3格式</p>
                        </div>
                    </el-upload>
                </el-col>
                <el-col :span="12">
                    <div class="title">附件列表</div>
                    <div class="list-header list-item">
                        <div class="left">名称</div>
                        <div class="right">上传状态</div>
                    </div>
                    <ul class="list-box">
                        <template v-if="fileList && fileList.length > 0">
                            <li :class="['list-item', item.statusName == '上传中' ? 'gray' : '']" v-for="item of fileList" :key="item.id">
                                <div class="left">{{ item.fileName }}</div>
                                <div :class="['right', item.statusName == '上传失败' ? 'error' : '']">
                                    <span>{{ item.statusName }}</span>
                                    <el-icon v-if="item.statusName != '上传中'" class="del-icon" @click="delFile(item)">
                                        <Close />
                                    </el-icon>
                                </div>
                            </li>
                        </template>
                        <el-empty v-else description="暂无数据" />
                    </ul>
                </el-col>
            </el-row>
            <template #footer>
                <el-button @click="onReset" v-out>取消</el-button>
                <el-button @click="onSubmit" :disabled="disabledBtn" :loading="submitLoading" type="primary" v-out>确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts" name="DialogUploadFile">
import lodash from 'lodash'
import { appendixList, uploadFileApi, singleUploadBook } from '@/api/product-manage/electronic'
import { ElMessageBox } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { onMounted, ref, inject, nextTick } from 'vue'
import type { productItem, fileItem } from '@/models/product'
import { compactEmpty } from '@/utils/tool'

const onceMessage: any = inject('$onceMessage')
const dialogTitle = ref<string>('')
const submitLoading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const disabledBtn = ref<boolean>(false)
const productInfo = ref<productItem>({})
const fileTypes = ref<string>('.pdf, .doc, .docx, .ppt, .pptx,.zip,.mp3')
const fileList = ref<fileItem[]>([])
const delList = ref<fileItem[]>([])

// 抛出事件
const emits = defineEmits<{
    (e: 'success'): void
}>()

const show = (row: productItem) => {
    dialogVisible.value = true
    productInfo.value = row
    delList.value = []
    getFileList(row.serialNo)
    dialogTitle.value = `上传：${row.productName}`
}
defineExpose({ show })

// 设置文件类型
const setType = (str: string) => {
    let index = str.lastIndexOf('.')
    let fileType = str.substring(index + 1, str.length)
    let shortName = str.substring(0, index)
    return {
        fileType,
        shortName
    }
}

// 获取附件列表
const getFileList = (serialNo: string) => {
    if (!serialNo) {
        return
    }
    appendixList(serialNo).then(res => {
        let arr = res.data || []
        arr.forEach((item: fileItem, index: number) => {
            item.statusName = '已完成'
            let e = setType(item.fileName)
            item.fileType = e.fileType
            item.shortName = e.shortName
        })
        fileList.value = arr
    })
}

// 拖拽校验文件类型
const beforeUploadHandler = (obj: {}) => {
    for (var i in obj) {
        let e = setType(obj[i].name)
        let types = ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'zip', 'mp3']
        if (types.indexOf(e.fileType) == -1) {
            ElMessageBox.confirm(`请上传pdf、pptx、ppt、docx、doc、zip、mp3格式`, obj[i].name + '格式错误', {
                confirmButtonText: '确定',
                showCancelButton: false,
                type: 'warning',
                closeOnClickModal: false
            })
                .then(() => {})
                .catch(() => {})
        }
    }
}

// 上传之前
const beforeUpload: UploadProps['beforeUpload'] = rawFile => {
    let e = setType(rawFile.name)
    let exit = false
    if (['doc', 'docx'].indexOf(e.fileType) != -1) {
        // word文档
        let arr = lodash.filter(fileList.value, function (item) {
            return ['doc', 'docx'].indexOf(item.fileType) != -1
        })
        arr.forEach(item => {
            if (item.shortName == e.shortName) {
                exit = true
            }
        })
    } else if (['ppt', 'pptx'].indexOf(e.fileType) != -1) {
        // ppt
        let arr = lodash.filter(fileList.value, function (item) {
            return ['ppt', 'pptx'].indexOf(item.fileType) != -1
        })
        arr.forEach(item => {
            if (item.shortName == e.shortName) {
                exit = true
            }
        })
    } else {
        fileList.value.forEach(item => {
            if (item.shortName == e.shortName && item.fileType == e.fileType) {
                exit = true
            }
        })
    }

    if (exit) {
        ElMessageBox.confirm(`附件列表中存在为${rawFile.name}的文件?`, '重名提示', {
            confirmButtonText: '替换附件列表文件',
            cancelButtonText: '跳过文件',
            type: 'warning',
            closeOnClickModal: false
        })
            .then(() => {
                fileList.value.forEach((item: fileItem, index: number) => {
                    let files = setType(item.fileName)
                    if (['doc', 'docx'].indexOf(e.fileType) != -1 && ['doc', 'docx'].indexOf(files.fileType) != -1 && e.shortName == files.shortName) {
                        // word文档
                        item.statusName = '上传中'
                        item.filePath = ''
                        item.id = item.id ? item.id : rawFile.uid + ''
                        item.fileName = rawFile.name
                        item.fileType = e.fileType
                        item.shortName = e.shortName
                        item.updateFlag = item.updateFlag == 0 ? 0 : 1
                        uploadFile(rawFile, item.id)
                    } else if (['ppt', 'pptx'].indexOf(e.fileType) != -1 && ['ppt', 'pptx'].indexOf(files.fileType) != -1 && e.shortName == files.shortName) {
                        // ppt
                        item.statusName = '上传中'
                        item.filePath = ''
                        item.id = item.id ? item.id : rawFile.uid + ''
                        item.fileName = rawFile.name
                        item.fileType = e.fileType
                        item.shortName = e.shortName
                        item.updateFlag = item.updateFlag == 0 ? 0 : 1
                        uploadFile(rawFile, item.id)
                    } else if (item.fileName == rawFile.name) {
                        //其他
                        item.statusName = '上传中'
                        item.filePath = ''
                        item.id = item.id ? item.id : rawFile.uid + ''
                        item.fileName = rawFile.name
                        item.fileType = e.fileType
                        item.shortName = e.shortName
                        item.updateFlag = item.updateFlag == 0 ? 0 : 1
                        uploadFile(rawFile, item.id)
                    }
                })
            })
            .catch(() => {})
    } else {
        let item = {
            id: rawFile.uid + '',
            fileName: rawFile.name,
            filePath: '',
            statusName: '上传中',
            fileType: e.fileType,
            shortName: e.shortName,
            updateFlag: 0
        }
        fileList.value.push(item)
        uploadFile(rawFile, item.id)
    }
    return false
}

// 上传附件
const uploadFile = (e: any, id: string | number, markFlag: any = 1) => {
    let params = new FormData()
    params.append('file', e)
    params.append('folderId', '')
    params.append('markFlag', markFlag)
    uploadFileApi(params)
        .then(res => {
            fileList.value.forEach(item => {
                if (item.id == id) {
                    item.filePath = res.data
                    item.statusName = '已完成'
                }
            })
        })
        .catch(err => {
            fileList.value.forEach(item => {
                if (item.id == id) {
                    item.statusName = '上传失败'
                }
            })
        })
}

// 删除附件
const delFile = (e: fileItem) => {
    fileList.value = lodash.filter(fileList.value, function (item) {
        return item.id != e.id
    })
    if (compactEmpty(e.updateFlag)) {
        delList.value.push(e)
    }
}
// 取消
const onReset = () => {
    dialogVisible.value = false
}
// 提交
const onSubmit = () => {
    let updateArr = lodash.filter(fileList.value, function (item) {
        return item.statusName == '已完成' && !compactEmpty(item.updateFlag)
    })
    // 未修改不调用接口
    if (delList.value.length < 1 && updateArr.length < 1) {
        dialogVisible.value = false
        allMark.value = false
        markFlag.value = null
        return
    }    
    let param = {
        bookName: productInfo.value.productName,
        serialNo: productInfo.value.serialNo
    }
    let appendixes: fileItem[] = []
    fileList.value.forEach((item: fileItem) => {
        if (item.statusName == '已完成' && !compactEmpty(item.updateFlag)) {
            appendixes.push({
                id: item.updateFlag == 0 ? '' : item.id,
                fileName: item.fileName,
                filePath: item.filePath,
                updateFlag: item.updateFlag
            })
        }
    })
    delList.value.forEach((item: fileItem) => {
        if (item.statusName == '已完成') {
            appendixes.push({
                id: item.id,
                fileName: item.fileName,
                filePath: item.filePath,
                updateFlag: 2
            })
        }
    })
    submitLoading.value = true
    singleUploadBook({
        ...param,
        appendixes
    })
        .then(res => {
            emits('success')
            onceMessage.success('上传成功')
            submitLoading.value = false
            dialogVisible.value = false
        })
        .catch(e => {
            submitLoading.value = false
        })
}
</script>
<style lang="scss">
.el-overlay {
    background-color: transparent;
}
.upload-box {
    .ep-upload.is-drag {
        display: block;
        height: 60vh;
        width: 100%;
        .ep-upload-dragger {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            border: 2px dashed #e5e6eb;
            &:hover {
                border-color: #e5e6eb;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.title {
    font-size: $text_color;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: $spacing;
}
.upload-box {
    height: 60vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-upload__text {
        color: $gray_text_color;
        margin-top: $spacing;
    }
}
.list-box {
    height: calc(60vh - 30px);
    box-sizing: border-box;
    overflow: auto;
}
.list-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid $border_color;
    padding: 5px 0;
    .left {
        width: 70%;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .right {
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .del-icon {
        cursor: pointer;
        &:hover {
            color: $primary_color;
        }
    }
}
.list-header {
    border: none;
    font-weight: bold;
}
.gray {
    color: $gray_text_color;
}
.error {
    color: $danger_color;
}
</style>

二、需求

  1. 上传文件前判断是否是pdf文件，如果是则弹出如下是否增加水印提示框
    • 批量选择文件，碰到pdf文件，依次弹出如上提示框
    • 若勾选了为后续pdf文件执行相同操作，则不再弹出如上提示框
    • 若选择的文件中只有一个pdf文件，则不显示提示框中的复选框和"为后续pdf文件执行相同操作"文字
  2. 添加批量上传功能

三、需求实现

1. 修改后使用组件代码片段

html 复制代码 
<!-- 上传 -->
<DialogUploadFile ref="uploadFile" @success="refresh" />
<!-- 批量上传 -->
<DialogUploadFile ref="batchUploadFile" :isBatch="true" />
js 复制代码 
// 上传
const uploadHandle = () => {
    if (selections.value.length != 1) {
        onceMessage.warning('请选择一条数据操作')
        return
    }
    uploadFile.value.show(selections.value[0])
}

// 批量上传
const batchUploadHandle = () => {
    batchUploadFile.value.show()
}

2. 是否增加水印弹窗代码 DialogWatermark.vue

html 复制代码 
<template>
    <div>
        <el-dialog v-model="dialogVisible" title="是否增加水印提示" width="500px" :show-close="false" :close-on-click-modal="false">
            <div class="txt center">附件"{{ fileName || '' }}"是否增加水印？</div>
            <div class="btns-box center">
                <el-button class="btn" type="primary" size="small" @click="handleYes">是</el-button>
                <el-button class="btn" size="small" @click="handleNo">否</el-button>
            </div>
            <div class="center" v-if="showCheck"><el-checkbox v-model="checked">为后续pdf文件执行相同操作</el-checkbox></div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="DialogWatermark">
import { ref } from 'vue'

// 抛出事件
const emits = defineEmits(['on-change'])

const dialogVisible = ref<boolean>(false)
const showCheck = ref<boolean>(true)
const checked = ref<boolean>(false)
const info = ref<any>()
const fileName = ref<any>('')
const listIndex = ref<any>(null)

const show = (e: any, index: any, bool: boolean) => {
    checked.value = false // 重置复选框
    listIndex.value = index
    if (String(index) != 'null') {
        info.value = e || {}
        fileName.value = e?.name
        showCheck.value = bool
    } else {
        info.value = e || []
        fileName.value = e && e.length ? e[0].name : ''
        showCheck.value = e && e.length == 1 ? false : true
    }
    dialogVisible.value = true
}

defineExpose({ show })

// 点击是
const handleYes = () => {
    dialogVisible.value = false
    let obj = {
        data: info.value,
        index: listIndex.value,
        check: checked.value,
        flag: 1
    }
    emits('on-change', obj)
}
// 点击否
const handleNo = () => {
    dialogVisible.value = false
    let obj = {
        data: info.value,
        index: listIndex.value,
        check: checked.value,
        flag: 0
    }
    emits('on-change', obj)
}
</script>

<style lang="scss" scoped>
.txt {
    font-size: 16px;
    line-height: 32px;
    margin-bottom: $spacing * 2;
}
.btns-box {
    margin-bottom: $spacing * 2;

    :deep(.ep-button--small) {
        width: 60px;
    }

    .btn + .btn {
        margin-left: $spacing * 6;
    }
}

.center {
    text-align: center;
}
</style>

3. 上传组件修改后代码 DialogUploadFile.vue

html 复制代码 
<template>
    <div class="no-modal-dialog">
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px" :close-on-click-modal="false">
            <!-- 此处代码不变，省略...... -->
        </el-dialog>
        <!-- 是否增加水印弹窗 -->
        <DialogIFWatermark ref="dialogIFWatermarkRef" @on-change="changeWatermark" />
		<!-- 批量上传结果弹窗 -->
        <DialogErrorUpload ref="dialogErrorUploadRef" />
    </div>
</template>

<script setup lang="ts" name="DialogUploadFile">
import lodash from 'lodash'
import { appendixList, uploadFileApi, singleUploadBook, batchUploadBook } from '@/api/product-manage/electronic'
import { ElMessageBox, ElCheckbox, ElButton } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { onMounted, ref, inject, nextTick, h } from 'vue'
import type { productItem, fileItem } from '@/models/product'
import { compactEmpty } from '@/utils/tool'
import DialogIFWatermark from './DialogIFWatermark.vue'
import DialogErrorUpload from './DialogErrorUpload.vue'

const props = defineProps({
    isBatch: {
        type: Boolean,
        default: false
    }
})

const onceMessage: any = inject('$onceMessage')
const dialogTitle = ref<string>('')
const submitLoading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const disabledBtn = ref<boolean>(false)

const allMark = ref<boolean>(false)
const markFlag = ref<any>(null)

const productInfo = ref<productItem>({})
const fileTypes = ref<string>('.pdf, .doc, .docx, .ppt, .pptx,.zip,.mp3')
const fileList = ref<fileItem[]>([])
const delList = ref<fileItem[]>([])

const tempList = ref<fileItem[]>([])
const pdfList = ref<any>([])
const dialogIFWatermarkRef = ref<any>()
const dialogErrorUploadRef = ref<any>()

// 抛出事件
const emits = defineEmits<{
    (e: 'success'): void
}>()

const show = (row: productItem) => {
    dialogVisible.value = true
    if (!props.isBatch) {
        productInfo.value = row
        delList.value = []
        getFileList(row.serialNo)
        dialogTitle.value = `上传：${row.productName}`
    } else {
        fileList.value = []
        delList.value = []
        tempList.value = []
        pdfList.value = []
        dialogTitle.value = '批量上传'
    }
}
defineExpose({ show })

// 设置文件类型
const setType = (str: string) => {
    // 此处代码不变，省略......
}

// 获取附件列表
const getFileList = (serialNo: string) => {
    // 此处代码不变，省略......
}

// 拖拽校验文件类型
const beforeUploadHandler = (obj: {}) => {
    // 此处代码不变，省略......
}

// 是否加水印
const changeWatermark = (e: any) => {
    allMark.value = e.check
    markFlag.value = e.flag
    if (String(e.index) != 'null') {
        let rawFile = e.data || {}
        let obj = setType(rawFile.name)
        // 列表有重名文件进行覆盖操作的情况
        fileList.value.map((item, index) => {
            if (index == e.index) {
                item.statusName = '上传中'
                item.filePath = ''
                item.id = item.id ? item.id : rawFile.uid + ''
                item.fileName = rawFile.name
                item.fileType = obj.fileType
                item.shortName = obj.shortName
                item.updateFlag = item.updateFlag == 0 ? 0 : 1
                uploadFile(rawFile, item.id, e.flag)
                pdfList.value.shift()
            }
        })
    } else {
        // 列表无重名文件进行上传操作的情况
        
        /* 第一、第二次尝试 */
        // let item = {
        //     id: rawFile.uid + '',
        //     fileName: rawFile.name,
        //     filePath: '',
        //     statusName: '上传中',
        //     fileType: obj.fileType,
        //     shortName: obj.shortName,
        //     updateFlag: 0
        // }
        // fileList.value.push(item)
        // uploadFile(rawFile, item.id, e.flag)
        
        /* 最终实现 */
        let list = e.data || []
        handleUpload(list, allMark.value)
    }
}

// 循环上传
const handleUpload = (list: any, isChecked: boolean) => {
    if (isChecked) {
        list.map((item: any) => {
            let o = setType(item.name)
            let obj = {
                id: item.uid + '',
                fileName: item.name,
                filePath: '',
                statusName: '上传中',
                fileType: o.fileType,
                shortName: o.shortName,
                updateFlag: 0
            }
            fileList.value.push(obj)
            uploadFile(item, obj.id, markFlag.value)
        })
        tempList.value = []
    } else {
    	// 每次都上传数组的第0项，上传完把数组第0项删除
        let o = setType(list[0].name)
        let obj = {
            id: list[0].uid + '',
            fileName: list[0].name,
            filePath: '',
            statusName: '上传中',
            fileType: o.fileType,
            shortName: o.shortName,
            updateFlag: 0
        }
        fileList.value.push(obj)
        uploadFile(list[0], obj.id, markFlag.value)
        nextTick(() => {
            list.shift()
            if (list.length) {
                dialogIFWatermarkRef.value.show(list, null)
            }
        })
    }
}

// 上传之前
const beforeUpload: UploadProps['beforeUpload'] = rawFile => {
    allMark.value = false
    markFlag.value = null
    let e = setType(rawFile.name)
    let exit = false
    if (['doc', 'docx'].indexOf(e.fileType) != -1) {
        // word文档
        let arr = lodash.filter(fileList.value, function (item) {
            return ['doc', 'docx'].indexOf(item.fileType) != -1
        })
        arr.forEach(item => {
            if (item.shortName == e.shortName) {
                exit = true
            }
        })
    } else if (['ppt', 'pptx'].indexOf(e.fileType) != -1) {
        // ppt
        let arr = lodash.filter(fileList.value, function (item) {
            return ['ppt', 'pptx'].indexOf(item.fileType) != -1
        })
        arr.forEach(item => {
            if (item.shortName == e.shortName) {
                exit = true
            }
        })
    } else {
        fileList.value.forEach(item => {
            if (item.shortName == e.shortName && item.fileType == e.fileType) {
                exit = true
            }
        })
    }

    if (exit) {
        let selectList = pdfList.value || []
        selectList.push(rawFile)
        pdfList.value = selectList.filter((item: any) => setType(item.name).fileType == 'pdf')

        ElMessageBox.confirm(`附件列表中存在为${rawFile.name}的文件?`, '重名提示', {
            confirmButtonText: '替换附件列表文件',
            cancelButtonText: '跳过文件',
            type: 'warning',
            closeOnClickModal: false
        })
            .then(() => {
                fileList.value.forEach((item: fileItem, index: number) => {
                    let files = setType(item.fileName)
                    if (['doc', 'docx'].indexOf(e.fileType) != -1 && ['doc', 'docx'].indexOf(files.fileType) != -1 && e.shortName == files.shortName) {
                        // word文档
                        item.statusName = '上传中'
                        item.filePath = ''
                        item.id = item.id ? item.id : rawFile.uid + ''
                        item.fileName = rawFile.name
                        item.fileType = e.fileType
                        item.shortName = e.shortName
                        item.updateFlag = item.updateFlag == 0 ? 0 : 1
                        uploadFile(rawFile, item.id)
                    } else if (['ppt', 'pptx'].indexOf(e.fileType) != -1 && ['ppt', 'pptx'].indexOf(files.fileType) != -1 && e.shortName == files.shortName) {
                        // ppt
                        item.statusName = '上传中'
                        item.filePath = ''
                        item.id = item.id ? item.id : rawFile.uid + ''
                        item.fileName = rawFile.name
                        item.fileType = e.fileType
                        item.shortName = e.shortName
                        item.updateFlag = item.updateFlag == 0 ? 0 : 1
                        uploadFile(rawFile, item.id)
                    } else if (['pdf'].indexOf(e.fileType) != -1 && ['pdf'].indexOf(files.fileType) != -1 && e.shortName == files.shortName) {
                        // pdf（这一块的判断一直是正常的）
                        if (allMark.value) {
                            item.statusName = '上传中'
                            item.filePath = ''
                            item.id = item.id ? item.id : rawFile.uid + ''
                            item.fileName = rawFile.name
                            item.fileType = e.fileType
                            item.shortName = e.shortName
                            item.updateFlag = item.updateFlag == 0 ? 0 : 1
                            uploadFile(rawFile, item.id, markFlag.value)
                            pdfList.value.shift()
                        } else {
                            let bool = pdfList.value && pdfList.value.length == 1 ? false : true
                            dialogIFWatermarkRef.value.show(rawFile, index, bool)
                        }
                    } else if (item.fileName == rawFile.name) {
                        // 其他
                        item.statusName = '上传中'
                        item.filePath = ''
                        item.id = item.id ? item.id : rawFile.uid + ''
                        item.fileName = rawFile.name
                        item.fileType = e.fileType
                        item.shortName = e.shortName
                        item.updateFlag = item.updateFlag == 0 ? 0 : 1
                        uploadFile(rawFile, item.id)
                    }
                })
            })
            .catch(() => {
                if (e.fileType.indexOf('pdf') != -1) {
                    pdfList.value.shift()
                }
            })
    } else {
    // ------------------------------- 踩坑的地方主要在这块位置，上面的代码都正常 -------------------------------
    	/* 
    		第一次尝试使用的是dialog弹出框，即上面用el-dialog写的那个是否增加水印的组件，写法如下
    		问题：选中多个pdf文件上传，只弹出来一次是否增加水印的弹出框，且是最后一个pdf的，而不是依次弹出
    	*/
        // if (['pdf'].indexOf(e.fileType) != -1) {
        //     // pdf
        //     if (allMark.value) {
        //         let item = {
        //             id: rawFile.uid + '',
        //             fileName: rawFile.name,
        //             filePath: '',
        //             statusName: '上传中',
        //             fileType: e.fileType,
        //             shortName: e.shortName,
        //             updateFlag: 0
        //         }
        //         fileList.value.push(item)
        //         uploadFile(rawFile, item.id, markFlag.value)
        //     } else {
        //         dialogIFWatermarkRef.value.show(rawFile, null)
        //     }
        // } else {
        //     let item = {
        //         id: rawFile.uid + '',
        //         fileName: rawFile.name,
        //         filePath: '',
        //         statusName: '上传中',
        //         fileType: e.fileType,
        //         shortName: e.shortName,
        //         updateFlag: 0
        //     }
        //     fileList.value.push(item)
        //     uploadFile(rawFile, item.id)
        // }
        
    	/* 
    		考虑到上面ElMessageBox中的代码效果正常，是否增加水印弹出框能够正常的依次弹出
    		所以第二次尝试使用ElMessageBox，写法如下
    		问题：
    			1.弹出框是可以依次弹出了，但是勾选复选框后续文件执行相同操作，弹出框还是会弹出，不会关闭，因为它不会再走上面判断allMark.value了；
    			2.这里还要注意使用的ElCheckbox的modelValue值绑定的时候不能直接绑定allMark.value，否则会出现值变化了，但是复选框样式没有发生改变的问题
    	*/
        // let item = {
        //     id: rawFile.uid + '',
        //     fileName: rawFile.name,
        //     filePath: '',
        //     statusName: '上传中',
        //     fileType: e.fileType,
        //     shortName: e.shortName,
        //     updateFlag: 0
        // }
        // if (['pdf'].indexOf(e.fileType) != -1) {
        //     // pdf
        //     if (allMark.value) {
        //         fileList.value.push(item)
        //         uploadFile(rawFile, item.id, markFlag.value)
        //     } else {
        //         const checked = ref<any>(null)
        //         // checked.value = allMark.value ? 1 : 0
        //         ElMessageBox({
        //             title: `附件"${rawFile.name}"是否增加水印？`,
        //             center: true,
        //             showCancelButton: true,
        //             confirmButtonText: '是',
        //             cancelButtonText: '否',
        //             showClose: false,
        //             closeOnClickModal: false,
        //             message: h(ElCheckbox, {
        //                 modelValue: checked.value,
        //                 label: '为后续pdf文件执行相同操作',
        //                 // trueLabel: 1,
        //                 // falseLabel: 0,
        //                 'onUpdate:modelValue': (val: any) => {
        //                     checked.value = val
        //                     // allMark.value = val == 1 ? true : false
        //                     allMark.value = val
        //                 }
        //             })
        //         })
        //             .then(res => {
        //                 fileList.value.push(item)
        //                 uploadFile(rawFile, item.id, 1)
        //             })
        //             .catch(err => {
        //                 fileList.value.push(item)
        //                 uploadFile(rawFile, item.id, 0)
        //             })
        //     }
        // } else {
        //     fileList.value.push(item)
        //     uploadFile(rawFile, item.id)
        // }
        
        /* 最终实现 */
        let originList = tempList.value || []
        let obj: any = rawFile
        if (['pdf'].indexOf(e.fileType) != -1) {
            originList.push(obj)
            tempList.value = originList
            dialogIFWatermarkRef.value.show(tempList.value, null)
        } else {
            let item = {
                id: rawFile.uid + '',
                fileName: rawFile.name,
                filePath: '',
                statusName: '上传中',
                fileType: e.fileType,
                shortName: e.shortName,
                updateFlag: 0
            }
            fileList.value.push(item)
            uploadFile(rawFile, item.id)
        }
        
    }
    return false
}

// 上传附件
const uploadFile = (e: any, id: string | number, markFlag: any = 1) => {
    let params = new FormData()
    params.append('file', e)
    params.append('folderId', '')    
    params.append('markFlag', markFlag) // 加了一个是否添加水印的参数，其他逻辑不变
    uploadFileApi(params)
        .then(res => {
            fileList.value.forEach(item => {
                if (item.id == id) {
                    item.filePath = res.data
                    item.statusName = '已完成'
                }
            })
        })
        .catch(err => {
            fileList.value.forEach(item => {
                if (item.id == id) {
                    item.statusName = '上传失败'
                }
            })
        })
}

// 删除附件
const delFile = (e: fileItem) => {
    // 此处代码不变，省略......
}

// 取消
const onReset = () => {
    dialogVisible.value = false
    allMark.value = false
    markFlag.value = null
}

// 提交
const onSubmit = () => {
    let updateArr = lodash.filter(fileList.value, function (item) {
        return item.statusName == '已完成' && !compactEmpty(item.updateFlag)
    })
    // 未修改不调用接口
    if (delList.value.length < 1 && updateArr.length < 1) {
        dialogVisible.value = false
        allMark.value = false
        markFlag.value = null
        return
    }
    if (props.isBatch) {
    	// 批量上传
        let arr: any = []
        if (fileList.value && fileList.value.length) {
            fileList.value.forEach(item => {
                arr.push({
                    fileName: item.fileName,
                    filePath: item.filePath
                })
            })
        }
        submitLoading.value = true
        batchUploadBook(arr)
            .then(res => {
                dialogErrorUploadRef.value.show(res.data)
                submitLoading.value = false
                dialogVisible.value = false
                allMark.value = false
                markFlag.value = null
            })
            .catch(err => {
                submitLoading.value = false
                allMark.value = false
                markFlag.value = null
            })
    } else {
    	// 上传-原逻辑保持不变
        let param = {
            bookName: productInfo.value.productName,
            serialNo: productInfo.value.serialNo
        }
        let appendixes: fileItem[] = []
        fileList.value.forEach((item: fileItem) => {
            if (item.statusName == '已完成' && !compactEmpty(item.updateFlag)) {
                appendixes.push({
                    id: item.updateFlag == 0 ? '' : item.id,
                    fileName: item.fileName,
                    filePath: item.filePath,
                    updateFlag: item.updateFlag
                })
            }
        })
        delList.value.forEach((item: fileItem) => {
            if (item.statusName == '已完成') {
                appendixes.push({
                    id: item.id,
                    fileName: item.fileName,
                    filePath: item.filePath,
                    updateFlag: 2
                })
            }
        })
        submitLoading.value = true
        singleUploadBook({
            ...param,
            appendixes
        })
            .then(res => {
                emits('success')
                onceMessage.success('上传成功')
                submitLoading.value = false
                dialogVisible.value = false
                allMark.value = false
                markFlag.value = null
            })
            .catch(e => {
                submitLoading.value = false
                allMark.value = false
                markFlag.value = null
            })
    }
}
</script>

<style lang="scss">
/* 此处代码不变，省略......  */
</style>
相关推荐
朝阳58132 分钟前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路41 分钟前
GeoTools 读取影像元数据
前端
ssshooter1 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry2 小时前
Jetpack Compose 中的状态
前端
dae bal3 小时前
关于RSA和AES加密
前端·vue.js
柳杉3 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog3 小时前
低端设备加载webp ANR
前端·算法
LKAI.3 小时前
传统方式部署（RuoYi-Cloud）微服务
java·linux·前端·后端·微服务·node.js·ruoyi
刺客-Andy4 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js
前端工作日常4 小时前
我对eslint的进一步学习
前端·eslint
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03KGG转MP3工具|非KGM文件|解密音频04【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流