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

news2024/11/25 20:16:23

一、初始代码

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>

二、需求

在这里插入图片描述

  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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/859272.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

并行FIR滤波器

并行FIR滤波器

FIR 滤波器原理 FIR 滤波器是有限长单位冲击响应滤波器&#xff0c;又称为非递归型滤波器。FIR 滤波器具有严格的线性相频特性&#xff0c;同时其单位响应是有限长的&#xff0c;因而是稳定的系统。 FIR 滤波器本质上就是输入信号与单位冲击响应函数的卷积&#xff0c;表达式…
阅读更多...
MapBox加载不同风格

MapBox加载不同风格

初始化MapBox地图&#xff1a; var map new mapboxgl.Map({container: map,zoom: 3,center: [105, 34],//此处更改地图风格style: mapbox://styles/mapbox/satellite-v9,hash: false,});1.户外地图&#xff08;mapbox://styles/mapbox/basic-v9&#xff09;新版&#xff1a;&a…
阅读更多...
python——案例15：判断奇数还是偶数

python——案例15：判断奇数还是偶数

案例15&#xff1a;判断奇数还是偶数numint(input(输入数值&#xff1a;))if(num%2)0: #通过if语句判断print("{0}是偶数".format(num))else: #通过else语句判断print("{0}是奇数".format(num))
阅读更多...
Linux Linux基础命令

Linux Linux基础命令

1.pwd——显示当前位置的绝对路径 2.cd——切换目录&#xff0c;cd 后的参数表示要切换到的位置 &#xff08;1&#xff09;cd后面的参数为绝对路径&#xff1a; &#xff08;2&#xff09;cd后面的参数为相对路径&#xff1a; &#xff08;3&#xff09;cd ~回到家目录&#…
阅读更多...
Ansys Lumerical | 针对多模干涉耦合器的仿真设计与优化

Ansys Lumerical | 针对多模干涉耦合器的仿真设计与优化

说明 本示例演示通过12端口多模干涉(MMI)耦合器计算宽带传输和光损耗&#xff0c;并使用S参数在 INTERCONNECT 中创建 MMI 的紧凑模型。(联系我们获取文章附件) 综述 低损耗光耦合器和光分路器是基于 Mach-Zehnder 的光调制器的基本组件&#xff0c;是集成电路的关键组成部分。…
阅读更多...
数据结构——双向链表

数据结构——双向链表

双向链表实质上是在单向链表的基础上加上了一个指针指向后面地址 单向链表请参考http://t.csdn.cn/3Gxk9 物理结构 首先我们看一下两种链表的物理结构 我们可以看到&#xff1a;双向在单向基础上加入了一个指向上一个地址的指针&#xff0c;如此操作我们便可以向数组一样操作…
阅读更多...
【Android NDK开发】Android Studio 编写 JNI （C++）代码无提示

【Android NDK开发】Android Studio 编写 JNI （C++）代码无提示

随笔记 Android Studio在编写C代码时候&#xff0c;引入对应的头文件&#xff0c;Android Studio里却不提示对应的方法&#xff0c;需要在Studio中设置一下。 Mac中&#xff0c;选择 Android Studio > Preferences&#xff0c;选择Clangd >>Disable Clangd completio…
阅读更多...
【Vue3】自动引入插件-`unplugin-auto-import`

【Vue3】自动引入插件-`unplugin-auto-import`

Vue3自动引入插件-unplugin-auto-import&#xff0c;不必再手动 import 。 自动导入 api 按需为 Vite, Webpack, Rspack, Rollup 和 esbuild 。支持TypeScript。由unplugin驱动。 插件安装&#xff1a;unplugin-auto-import 配置vite.config.ts&#xff08;配置完后需要重启…
阅读更多...
(二) 【屠龙刀】 vsomeip协议栈的编译与使用

(二) 【屠龙刀】 vsomeip协议栈的编译与使用

前言 上一篇文章介绍了SOME/IP协议的报文格式，本片文章主要来介绍SOME/IP协议的具体实现，即vsomeip协议栈。 vsomeip由GENIVI组织根据SOME/IP协议标准实现的协议栈，如果说SOME/IP协议是一个人的灵魂，那么vsomeip就是受灵魂指导的肉体。本文将从如下几点去展开本文，手把手…
阅读更多...
米尔瑞萨RZ/G2L开发板-01 开箱+环境搭建+交叉编译FFMPEG

米尔瑞萨RZ/G2L开发板-01 开箱+环境搭建+交叉编译FFMPEG

标题有点长哈&#xff0c;首先要感谢米尔电子提供的开发板&#xff0c;异构的板子说实话还真的是最近才开始接触的&#xff0c;在我提交申请后&#xff0c;很快就收到板子了&#xff0c;而且还是顺丰给发来的&#xff0c;其实我估计很多人就是为了骗板子&#xff0c;因为米尔的…
阅读更多...
【学习FreeRTOS】第2章——FreeRTOS基础知识

【学习FreeRTOS】第2章——FreeRTOS基础知识

1.任务调度 1.1.任务调度简介 调度器就是使用相关的调度算法来决定当前需要执行的哪个任务FreeRTOS 一共支持三种任务调度方式&#xff1a; 抢占式调度&#xff1a;针对优先级不同的任务&#xff0c;每个任务都有一个优先级&#xff0c;优先级高的任务可以抢占优先级低的任务…
阅读更多...
2.CUDA 编程手册中文版---编程模型

2.CUDA 编程手册中文版---编程模型

2.编程模型 更多精彩内容&#xff0c;请扫描下方二维码或者访问https://developer.nvidia.com/zh-cn/developer-program 来加入NVIDIA开发者计划 本章通过概述CUDA编程模型是如何在c中公开的&#xff0c;来介绍CUDA的主要概念。 编程接口中给出了对 CUDA C 的广泛描述。 本章…
阅读更多...
linux环形缓冲区kfifo实践3：IO多路复用poll和select

linux环形缓冲区kfifo实践3：IO多路复用poll和select

基础知识 poll和select方法在Linux用户空间的API接口函数定义如下。 int poll(struct pollfd *fds, nfds_t nfds, int timeout); poll()函数的第一个参数fds是要监听的文件描述符集合&#xff0c;类型为指向struct pollfd的指针。struct pollfd数据结构定义如下。 struct poll…
阅读更多...
Netty的ReplayingDecoder分析

Netty的ReplayingDecoder分析

说明 io.netty.handler.codec.ReplayingDecoder是io.netty.handler.codec.ByteToMessageDecoder的一个子类&#xff0c;是一个抽象类&#xff0c;它将字节流解码成其它的消息。需要ReplayingDecoder的子类实现decode(ChannelHandlerContext ctx, ByteBuf in, List out)这个函数…
阅读更多...
Selenium 自动化 | 案例实战篇

Selenium 自动化 | 案例实战篇

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 的浏览器&#xff08;如 Chrome、Opera 和 Microsoft Edge&#xff09;中的工具&#xff0c;用于帮助开发人员调试和研究网站。 借助 Chrome DevTools&#xff0c;开发人员可以更深入地访问网站&#xf…
阅读更多...
恒盛策略：快跌慢涨是主力洗盘？

恒盛策略：快跌慢涨是主力洗盘？

当股市一直处于震荡状态&#xff0c;不断重复时。许多股民纷纷开端猜想股市未来走势&#xff0c;同时也有不少人议论着什么是“主力洗盘”和“快跌慢涨”。这儿&#xff0c;咱们来从多个视点来剖析这个问题。 首要&#xff0c;咱们需要了解“主力洗盘”和“快跌慢涨”两个概念。…
阅读更多...
leetcode 475. 供暖器(java)

leetcode 475. 供暖器(java)

供暖器 供暖器题目描述双指针代码演示 双指针专题 供暖器 难度 - 中等 leetcode 475 题目描述 冬季已经来临。 你的任务是设计一个有固定加热半径的供暖器向所有房屋供暖。 在加热器的加热半径范围内的每个房屋都可以获得供暖。 现在&#xff0c;给出位于一条水平线上的房屋 ho…
阅读更多...
window下部署Yapi接口管理系统部署总结

window下部署Yapi接口管理系统部署总结

window下部署Yapi接口管理系统部署总结 YApi 是高效、易用、功能强大的 api 管理平台&#xff0c;旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API&#xff0c;YApi 还为用户提供了优秀的交互体验&#xff0c;开发人员只需利用平…
阅读更多...
使用几何和线性代数从单个图像进行 3D 重建

使用几何和线性代数从单个图像进行 3D 重建

使用几何和线性代数从单个图像进行 3D 重建 萨蒂亚 一、说明 3D重构是一个挑战性题目&#xff0c;而且这个新颖的题目正处于启发和膨胀阶段&#xff1b;因此&#xff0c;各种各样的尝试层出不穷&#xff0c;本篇说明尝试的一种&#xff0c;至于其它更多的尝试&#xff0c;我们在…
阅读更多...
uniapp+vue3项目中使用vant-weapp

uniapp+vue3项目中使用vant-weapp

创建项目 通过vue-cli命令行创建项目 Vue3/Vite版要求 node 版本^14.18.0 || >16.0.0 uni-app官网 (dcloud.net.cn) npx degit dcloudio/uni-preset-vue#vite my-vue3-project打开项目 点击顶部菜单栏终端/新建终端 执行安装依赖指令 yarn install 或 npm install 安装vant…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023