element plus upload 常用批量上传逻辑,批量上传附件，存储json字符串的方式

电脑版发表于：2025/7/9 11:06

### 使用存储json字符串的方式

#### 添加的时候

```
<template>
			<el-form-item label="附件资料" prop="attachmentMany">
				<el-upload
					ref="uploadAttachment"
					class="upload-demo"
					style="width: 100%"
					action="/oss/api/SmartFiles/UpLoadFormFile"
					:before-remove="beforeAttachmentManyRemove"
					:headers="getHeaderToken()"
					:data="{
						bucketName: 'teacher-certification',
						filePath: 'adminfiles',
						FileType: 4
					}"
					:show-file-list="true"
					:on-success="handleAttachmentManySuccess"
					:on-preview="handleAttachmentManyPreview"
				>
					<el-button type="primary" size="default">请选择附件上传</el-button>
				</el-upload>
			</el-form-item>
</template>

<script setup>

import { ref, onMounted, nextTick } from 'vue';
import { getHeaderToken, getImgUrl, downLoadFile } from '/@/utils/toolsFunctions'

const initData = () => {
	state.editFromData.attachmentMany = ''
	state.editFromData.attachmentManyTemp = []
}

const beforeAttachmentManyRemove: UploadProps['beforeRemove'] = (uploadFile: any, uploadFiles) => {
	// ElMessage.error('暂不支持删除，可以重新上传覆盖!');
	// state.editFromData.attachmentManyTemp = ''
	// console.log("看看要删除的文件id",uploadFile.response.data.id)

	let fileId = uploadFile.response.data.id
	const newArray = state.editFromData.attachmentManyTemp.filter((item) => item.fileId !== fileId)
	state.editFromData.attachmentManyTemp = newArray

	// console.log("看看删除后的值",state.editFromData.attachmentManyTemp)

	return true
}

// 批量附件上传成功的处理，给值赋值
const handleAttachmentManySuccess = (res: any, file: any) => {
	if (res.success) {
		// state.editFromData.attachmentMany = []
		state.editFromData.attachmentManyTemp.push({ fileId: res.data.id, fileName: file.name })

		console.log('看看附件临时对象的值', state.editFromData.attachmentManyTemp)
	}
}

const handleAttachmentManyPreview: UploadProps['onPreview'] = (uploadFile: any) => {
	// console.log("看看点击的值",uploadFile)
	// console.log("看看点击的值",uploadFile.response.data.id)

	let fileId = uploadFile.response.data.id

	if (fileId) {
		downLoadFile(fileId)
	} else {
		ElMessage.error('预览失败,请检查文件是否存在!')
	}
}

// 存储的时候
const saveAddTrainingSubProgram = async (formEl: FormInstance | undefined) => {

	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {


			let attachmentManyJsonStr = JSON.stringify(state.editFromData.attachmentManyTemp)
			state.editFromData.attachmentMany = attachmentManyJsonStr

			// console.log("看看json字符串",attachmentManyJsonStr)
			// console.log("看看json字符串长度",attachmentManyJsonStr.length)

			state.saveLoading = true

			// 请求的api地址，以及返回数据的格式自己根据自己的修改
			request.post('/teacherCertifiApi/api/TrainingSubProgram/XX', state.editFromData).then((res: any) => {
				if (res.success) {
					initData()
					emitWays('subProgramSaveSuccess')
					state.saveLoading = false
					ElMessage.success('添加成功了哇！')
				}
			})
		} else {
			console.log('error submit!', fields)
			ElMessage.error('添加失败！请检查数据的正确性与完整性')
		}
	})
}


</script>

```


#### 更新的时候

```
<template>
		  <el-form-item label="附件资料" prop="attachmentMany">
				<el-upload
					ref="uploadAttachment"
					class="upload-demo"
					style="width: 100%"
					action="/oss/api/SmartFiles/UpLoadFormFile"
					:before-remove="beforeAttachmentManyRemove"
					:headers="getHeaderToken()"
					:data="{
						bucketName: 'teacher-certification',
						filePath: 'adminfiles',
						FileType: 4
					}"
					:file-list="state.attachmentManyFileList"
					:show-file-list="true"
					:on-success="handleAttachmentManySuccess"
					:on-preview="handleAttachmentManyPreview"
				>
					<el-button type="primary" size="default">请选择附件上传</el-button>
				</el-upload>
			</el-form-item>

</template>

<script setup>

import { ref, onMounted, nextTick } from 'vue';
import { getHeaderToken, getImgUrl, downLoadFile } from '/@/utils/toolsFunctions'

const initData = (selectRowData: any) => {
	let row = selectRowData

	state.editFromData.id = row.id

	if (row.attachmentMany) {
		let attachmentManyArray = JSON.parse(row.attachmentMany)

		state.editFromData.attachmentManyTemp = attachmentManyArray

		console.log('看看附件资料', attachmentManyArray)

		attachmentManyArray.forEach((element: any) => {
			state.attachmentManyFileList.push({
				name: element.fileName,
				attachment: element.fileId
			})
		})

		console.log('看看附件资料22', state.attachmentManyFileList)
	}

}


const beforeAttachmentManyRemove: UploadProps['beforeRemove'] = (uploadFile: any, uploadFiles) => {
	let fileId = uploadFile.response.data.id
	const newArray = state.editFromData.attachmentManyTemp.filter((item) => item.fileId !== fileId)
	state.editFromData.attachmentManyTemp = newArray

	// 这里不做直接存储，要存储点击保存后在更新到数据库，其实也可以防止误删文件

	return true
}
// 批量附件上传成功的处理，给值赋值
const handleAttachmentManySuccess = (res: any, file: any) => {
	if (res.success) {
		// state.editFromData.attachmentMany = []
		state.editFromData.attachmentManyTemp.push({ fileId: res.data.id, fileName: file.name })

		console.log('看看附件临时对象的值', state.editFromData.attachmentManyTemp)
	}
}
const handleAttachmentManyPreview: UploadProps['onPreview'] = (uploadFile: any) => {
	// console.log("看看访问的文件",uploadFile)

	let fileId = uploadFile.attachment

	// 没有说明就是新上传的就用这种方式取
	if (!fileId) {
		fileId = uploadFile.response.data.id
	}

	if (fileId) {
		downLoadFile(fileId)
	} else {
		ElMessage.error('预览失败,请检查文件是否存在!')
	}
}



// 保存更新的时候
const saveUpdateTrainingSubProgram = async (formEl: FormInstance | undefined) => {

	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {

			let attachmentManyJsonStr = JSON.stringify(state.editFromData.attachmentManyTemp)
			state.editFromData.attachmentMany = attachmentManyJsonStr

			// 调用更新的接口
		} else {
			console.log('error submit!', fields)
			ElMessage.error('更新失败！请检查数据的正确性与完整性')
		}
	})
}


</script>

```

TeachingNote

element plus upload 常用批量上传逻辑,批量上传附件，存储json字符串的方式

{{item.title}}