一、初始代码
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>
二、需求
文章来源地址https://www.toymoban.com/news/detail-640289.html
- 上传文件前判断是否是pdf文件,如果是则弹出如下是否增加水印提示框
- 批量选择文件,碰到pdf文件,依次弹出如上提示框
- 若勾选了为后续pdf文件执行相同操作,则不再弹出如上提示框
- 若选择的文件中只有一个pdf文件,则不显示提示框中的复选框和“为后续pdf文件执行相同操作”文字
- 添加批量上传功能
三、需求实现
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>
文章来源:https://www.toymoban.com/news/detail-640289.html
到了这里,关于【el-upload】批量上传图片时在before-upload中添加弹窗判断时的踩坑记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!