<el-upload
style="width:100%"
class="upload-demo"
drag
ref="upload-demo"
action=""
v-model="taskForm.file"
:file-list="fileLists"
:before-upload="handleBeforeUpload"
:http-request="uploadFile"
:on-remove="handleRemove"
:on-change="handleFileChange"
:limit="3"
:on-exceed="handleExceed"
:headers="headers"
multiple
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将文件拖拽到此处，或<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
最多上传3个附件
</div>
</template>
</el-upload>
// 文件上传
function uploadFiles (fileData) {
return new Promise((resolve,reject) => {
uploadFileData(fileData).then((res) => {
console.log('upload', res)
if (res.code == 200) {
fileNameArr.value.push(res.fileName)
resolve()
} else {
reject()
}
})
})
}
// 文件依次上传
function uploadAllFile () {
//一个一个上传
for (let i = 0; i < fileLists.value.length; i++) {
// 若是新添加文件即存在fileLists.value.raw,则调用上传接口，否则不需调用
if (fileLists.value[i].raw) {
let fileData = new FormData()
fileData.append('file', fileLists.value[i].raw)
uploadResult.value.push(uploadFiles(fileData))
console.log('test-file-up', fileLists.value[i].raw)
}
}
}
/** 点击提交按钮 */
function submitForm() {
proxy.$refs["taskForms"].validate(valid => {
if (valid) {
loading.value = ElLoading.service({
lock: true,
text: 'Loading'
})
if (fileLists.value.length > 0) {
// 调用依次上传文件
uploadAllFile()
Promise.all(uploadResult.value).then(() => {
taskForm.value.file = JSON.stringify(fileNameArr.value)
console.log('jsont-test', taskForm.value.file)
addAndEdit()
}).catch((error) => {
fileNameArr.value = []
loading.value.close()
ElMessage({
message: '文件上传失败！请重新上传',
type: 'error',
})
})
} else {
addAndEdit()
}
}
})
}
function addAndEdit () {
// 编辑
if (taskId.value) {
editTaskData({
传参}).then((res) => {
console.log('addres-test=', res)
if (res.code == 200) {
ElMessage({
message: '编辑成功',
type: 'success',
})
loading.value.close()
cancelClick()
methods.getTaskList()
} else {
ElMessage({
message: res.msg || '编辑失败',
type: 'error',
})
}
}).finally(() => {
loading.value.close()
})
} else {
// 新增
addTaskData({
传参}).then((res) => {
console.log('addres-test=', res)
if (res.code == 200) {
ElMessage({
message: '新增成功',
type: 'success',
})
cancelClick()
loading.value.close()
methods.getTaskList()
} else {
ElMessage({
message: res.msg || '新增失败',
type: 'error',
})
}
}).finally(() => {
loading.value.close()
})
}
}
// 点击新增
function addTasks () {
taskTitle.value = '新增重保任务'
showTask.value = true
}
// 点击编辑
function editTasks (row) {
console.log('test-row', row)
taskId.value = row.id
taskForm.value = {
...row}
taskTitle.value = '编辑重保任务'
showTask.value = true
fileNameArr.value = JSON.parse(row.file)
// 文件回显
fileNameArr.value.forEach(item => {
fileLists.value.push({
name: item })
})
console.log('edoite', taskForm.value, fileNameArr.value, fileLists.value)
}
/** 取消按钮 */
function cancelClick() {
showTask.value = false
taskId.value = null
fileNameArr.value = []
fileLists.value = []
taskForm.value.file = ''
proxy.$refs["taskForms"].resetFields()
}
function handleBeforeUpload (file) {
//获取上传文件大小
let fileSize = Number(file.size / 1024 / 1024);
if (fileSize > 100) {
ElMessage({
message: '文件大小不能超过100MB，请重新上传。', type: 'warning'})
return false
}
}
function uploadFile (params) {
if (params.file == null) {
ElMessage({
message: '请选择需要上传的文件', type: 'warning'})
return false
}
}
function handleFileChange (file, fileList) {
fileLists.value = fileList
console.log('test-filelist',taskForm.value.file, fileLists.value)
}
function handleRemove (file, fileList) {
fileLists.value = fileList
console.log('test-del-filelist',taskForm.value.file, fileLists.value)
}
function handleExceed(files, fileList) {
ElMessage({
message: '最多上传3个文件，请删除后重新上传！', type: 'warning'})
}
Hope it helps you