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

已于 2023-08-10 17:41:31 修改
阅读量658 收藏
点赞数
分类专栏： Element-UI 文章标签： 前端 vue.js
于 2023-08-10 17:37:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Komorebi_00/article/details/132211732
版权

一、初始代码

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>
Komorebi゛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el span=10 class=mt10> <el-upload class=upload-demo :file-list=fileList2 :action=domain :before-upload=beforeAvatarUpload :data=form :on-remo
vue使用el-upload上传，上传错误文件，名称还会显示
weixin_44021888的博客
03-29 414
vue使用el-upload上传，上传错误文件，名称还会显示
el-upload点击打开文件上传弹窗之前进行其他操作，等待操作完成后再打开文件上传弹窗
Aa12364567的博客
11-21 2836
el-upload文件上传窗口打开之前的判断，满足条件后打开上传文件窗口
el-upload导入功能
程序媛的博客
01-06 515
" effect="dark" content="导入功能" placement="top">>导入病历</el-button>// // 是否更新已经存在的用户数据。// 是否显示弹出层（导入）// 弹出层标题（导入）// 设置上传的请求头部。
Element 上传组件 beforeUpload上传前限制失效
xiaoleiv9的博客
04-28 4644
在before-upload（上传文件之前的钩子 参数为上传的文件 若返回 false 或者返回 Promise 且被 reject 则停止上传）钩子里去做判断 这里有一个坑 当你设置了 :auto-upload="false" 的时候， 这个钩子是不会被触发的，因此也可以在on-change中做判断。 beforeUpload(file, fileList) { if (file.size / (1024 * 1024) > 500) { // 限制文件大小 this.$m.
Vue 根据Upload组件的before-upload方法，限制用户上传文件的类型及大小
qq_34082921的博客
08-17 1898
Vue 根据Upload组件的before-upload方法，限制用户上传文件的类型及大小
多个Promise异步方法的同步调用
醉月听风的博客
11-17 1899
创建多个异步方法： var fun1 = function () { return new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000); }) } var fun2 = function (num) {
el-upload当设置auto-upload为false时，before-upload钩子未触发
vanora1111的博客
06-15 3784
三、考虑到用户体验，新增文件必填，并且 当文件上传以后去掉必填校验提示，譬如这个。2、当 :auto-upload="false"，组件。1、上传时，组件是否自动上传，可以设置如下属性。2、在watch里监听状态。1、首先定义校验提示。
element中before-upload添加自定义参数
前端菜鸡的博客
02-22 4981
默认情况下before-upload返回的有一个默认参数file，如果在循环中，需要标识就需要添加一个自定义参数 :before-upload="function (file) { return handleBefore(file, index)}" 这样就可以在下面通过函数接收到自定义参数index handleBefore(file, index) {} ...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
10-18
主要介绍了vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效的解决方法，这里需要主要项目中用的element-ui是V1.4.3，感兴趣的朋友参考下吧
elemetUi 组件–el-upload实现上传Excel文件的实例
11-26
【需求】实现上传Excel文件，在上传到服务器时，还要附加一个参数，在请求上传文件接口前，先要进行文件格式判断。 【知识点】 　1、el-upload 官方文档中，主要用到了以下属性： data 可选参数, 上传时附带的...
【JavaScript源代码】vue el-upload上传文件的示例代码.docx
12-29
vue el-upload上传文件的示例代码 　话不多说 直接上代码　<el-upload　:action="actionUrl"　class="avatar-uploader"　:multiple="false"　name="files"　ref="upload"　:file-list="fileList"　:on-preview=...
element-ui拖拽上传及问题解决(drag的使用注意事项)
2301_76866366的博客
05-25 2038
element-ui拖拽上传及问题解决,el-upload的drag属性使用过程中宽度问题的解决.........
封装el-upload实现文件上传弹出框和进度条展示
ew45218的博客
12-28 1126
使用若依分离版的框架，基于element-ui的上传组件封装。
解决Element-UI el-upload组件，上传文件格式不符，依旧可以上传成功问题
qq_44811609的博客
04-13 1131
上传组件中添加 :before-upload="beforeUpload"
element 文件上传 使用before-upload在上传前做验证，解决发送请求回调和自定义上传配置
热门推荐
qq_45668489的博客
07-01 1万+
before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file) 因为项目有一个需求，改图片是否重传，调用验证请求，如果数据库有则直接放回链接，打断上传。如果数据库没有则继续上传。 <div class="my-upload-box"> <span @click="isShowUpload">取消</span> <el-upload class="u.
el-upload中的before-upload不生效
m0_51077750的博客
10-19 1383
由于执行函数 onChange() 时，已经将 file 加入fileList 数组了，所以当我们发现文件不符合条件时，要将 文件从fileList 中吐出来。before-upload是在上传文件时触发，不是添加文件时触发，添加文件时触发 on-change。所以如果我们要在添加文件时，对文件的大小和后缀等等进行判断，可以用 on-change 方法来实现。我们先来看看官方对before-upload的定义。
picoCTF-Web Exploitation-Web Gauntlet
最新发布
huckers的博客
05-12 464
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
el-upload 批量上传图片 示例代码
11-22
当使用Vue的el-upload组件进行批量上传图片时，你可以按照以下示例代码进行操作： ```html <el-upload class="upload-demo" action="/your-upload-url" :multiple="true" :on-success="handleSuccess" :...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Komorebi゛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值