【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>
相关推荐
小吕学编程13 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041220 分钟前
Netty编解码器详解与实战
前端
袁煦丞25 分钟前
每天省2小时！这个网盘神器让我告别云存储混乱（附内网穿透神操作）
前端·程序员·远程工作
Mr.app1 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
心宽体胖连壮实2 小时前
记录一次 MarchingSquaresJS 使用经历
vue.js
热门推荐
01西电B测-计算机网络综合实验(含验收问题)02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09我决定放弃搞 Java 了10yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）