当前位置： 首页 > news >正文

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

news 2025/8/6 1:48:07

一、初始代码

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-uploadclass="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 = trueproductInfo.value = rowdelList.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.fileTypeitem.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 = falseif (['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) {// pptlet 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.nameitem.fileType = e.fileTypeitem.shortName = e.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(rawFile, item.id)} else if (['ppt', 'pptx'].indexOf(e.fileType) != -1 && ['ppt', 'pptx'].indexOf(files.fileType) != -1 && e.shortName == files.shortName) {// pptitem.statusName = '上传中'item.filePath = ''item.id = item.id ? item.id : rawFile.uid + ''item.fileName = rawFile.nameitem.fileType = e.fileTypeitem.shortName = e.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(rawFile, item.id)} else if (item.fileName == rawFile.name) {//其他item.statusName = '上传中'item.filePath = ''item.id = item.id ? item.id : rawFile.uid + ''item.fileName = rawFile.nameitem.fileType = e.fileTypeitem.shortName = e.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(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.dataitem.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 = falseallMark.value = falsemarkFlag.value = nullreturn}    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 = truesingleUploadBook({...param,appendixes}).then(res => {emits('success')onceMessage.success('上传成功')submitLoading.value = falsedialogVisible.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 = indexif (String(index) != 'null') {info.value = e || {}fileName.value = e?.nameshowCheck.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 = falselet obj = {data: info.value,index: listIndex.value,check: checked.value,flag: 1}emits('on-change', obj)
}
// 点击否
const handleNo = () => {dialogVisible.value = falselet 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 = trueif (!props.isBatch) {productInfo.value = rowdelList.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.checkmarkFlag.value = e.flagif (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.nameitem.fileType = obj.fileTypeitem.shortName = obj.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(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 = falsemarkFlag.value = nulllet e = setType(rawFile.name)let exit = falseif (['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) {// pptlet 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.nameitem.fileType = e.fileTypeitem.shortName = e.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(rawFile, item.id)} else if (['ppt', 'pptx'].indexOf(e.fileType) != -1 && ['ppt', 'pptx'].indexOf(files.fileType) != -1 && e.shortName == files.shortName) {// pptitem.statusName = '上传中'item.filePath = ''item.id = item.id ? item.id : rawFile.uid + ''item.fileName = rawFile.nameitem.fileType = e.fileTypeitem.shortName = e.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(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.nameitem.fileType = e.fileTypeitem.shortName = e.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(rawFile, item.id, markFlag.value)pdfList.value.shift()} else {let bool = pdfList.value && pdfList.value.length == 1 ? false : truedialogIFWatermarkRef.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.nameitem.fileType = e.fileTypeitem.shortName = e.shortNameitem.updateFlag = item.updateFlag == 0 ? 0 : 1uploadFile(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 = rawFileif (['pdf'].indexOf(e.fileType) != -1) {originList.push(obj)tempList.value = originListdialogIFWatermarkRef.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.dataitem.statusName = '已完成'}})}).catch(err => {fileList.value.forEach(item => {if (item.id == id) {item.statusName = '上传失败'}})})
}// 删除附件
const delFile = (e: fileItem) => {// 此处代码不变，省略......
}// 取消
const onReset = () => {dialogVisible.value = falseallMark.value = falsemarkFlag.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 = falseallMark.value = falsemarkFlag.value = nullreturn}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 = truebatchUploadBook(arr).then(res => {dialogErrorUploadRef.value.show(res.data)submitLoading.value = falsedialogVisible.value = falseallMark.value = falsemarkFlag.value = null}).catch(err => {submitLoading.value = falseallMark.value = falsemarkFlag.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 = truesingleUploadBook({...param,appendixes}).then(res => {emits('success')onceMessage.success('上传成功')submitLoading.value = falsedialogVisible.value = falseallMark.value = falsemarkFlag.value = null}).catch(e => {submitLoading.value = falseallMark.value = falsemarkFlag.value = null})}
}
</script><style lang="scss">
/* 此处代码不变，省略......  */
</style>
http://www.lryc.cn/news/117865.html

相关文章：

  • 【Java基础】- JVM之Dump文件详解
  • 基于Vue+wangeditor实现富文本编辑
  • 深入理解 Spring 中的 @RequestBody 和 @ResponseBody 注解及其区别
  • 【论文阅读】EULER：通过可扩展时间链接预测检测网络横向移动（NDSS-2022）
  • 手动创建一个DOCKER镜像
  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--搭建Vue 前端工程[一]
  • Idea使用Docker插件实现maven打包自动构建镜像
  • Tailwind css优于Bootstrap 7个原因
  • IDEA简单拷贝一份新项目记录
  • 华为OD真题--字符串加密
  • UML-状态图
  • chrome插件开发实例07- Vue调试插件vue-devtools
  • HTML ＜span＞ 标签
  • 【PythonGIS】Python处理矢量数据的基本操作（查询、修改、删除、新建）
  • 15.2 【Linux】仅执行一次的工作调度
  • 时间复杂度与空间复杂度的详解
  • 每日一学：什么是 Harbor ？
  • 灰度均衡变换之c++实现（qt + 不调包）
  • flink1.17 自定义trigger ContinuousEventTimeTrigger
  • AIGC：【LLM（五）】——Faiss：高效的大规模相似度检索库
  • 自然语言处理从入门到应用——LangChain：记忆（Memory）-[记忆的类型Ⅱ]
  • 桥接模式-java实现
  • Linux systemd管理常用的几个小案例
  • 38、IPv6过渡技术
  • HMMER-序列分析软件介绍
  • 【项目学习1】如何将java对象转化为XML字符串
  • nginx负载均衡
  • 【毕业项目】自主设计HTTP
  • 关于安卓jar包修改并且重新发布
  • Java课题笔记~ AspectJ 对 AOP 的实现(掌握)