1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：Komorebi゛ 分类：Toy博客 阅读(51) 违法举报

这篇具有很好参考价值的文章主要介绍了【el-upload】批量上传图片时在before-upload中添加弹窗判断时的踩坑记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、初始代码

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

<!-- 上传 -->
<DialogUploadFile ref="uploadFile" @success="refresh" />

// 上传
const uploadHandle = () => {
    if (selections.value.length != 1) {
        onceMessage.warning('请选择一条数据操作')
        return
    }
    uploadFile.value.show(selections.value[0])
}

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

<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>

二、需求

【el-upload】批量上传图片时在before-upload中添加弹窗判断时的踩坑记录,Element-UI,前端,vue.js文章来源地址https://www.toymoban.com/news/detail-640289.html

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

三、需求实现

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

<!-- 上传 -->
<DialogUploadFile ref="uploadFile" @success="refresh" />
<!-- 批量上传 -->
<DialogUploadFile ref="batchUploadFile" :isBatch="true" />

// 上传
const uploadHandle = () => {
    if (selections.value.length != 1) {
        onceMessage.warning('请选择一条数据操作')
        return
    }
    uploadFile.value.show(selections.value[0])
}

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

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

<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

<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>

到了这里，关于【el-upload】批量上传图片时在before-upload中添加弹窗判断时的踩坑记录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包