热门标签
热门文章
- 1《STM32 HAL库》中断相关函数详尽解析——外部中断服务函数
- 2Stable Diffusion——stable diffusion基础原理详解与安装秋叶整合包进行出图测试
- 3第二弹！又来5个Jupyter Notebook使用技巧！
- 4Spring框架中涉及的设计模式_spring 代码设计
- 5探索 StableDiffusion：生成高质量图片学习及应用
- 6前端面试八股文 - 面试必备_前端八股文面试题2023
- 7测试老鸟分享：掌握2项技能，轻松拿到软件测试工程师offer...
- 8缓存相关问题：雪崩、穿透、预热、更新、降级的深度解析
- 9Kimi创始人套现4000万美元疑云|「商汤」大模型一体机可节约80%推理成本，完成云端边全栈布局|中国AI活化石，熬成AIGC第一股| 谁在制造小米汽车？_商汤 kimi
- 10微信小程序 java ssm 17.微信小程序跑腿平台的设计与实现（完整源码+数据库文件+万字文档+保姆级视频部署教程+配套环境）
当前位置: article > 正文
elementui表格嵌套上传文件，多个上传控件，可以删除、添加
作者：从前慢现在也慢 | 2024-05-17 14:47:38
赞
踩
elementui表格嵌套上传文件，多个上传控件，可以删除、添加
<template> <el-table :data="tableData" @cell-click="cellTable"> <el-table-column label="文件" :render-header="renderHeader" show-overflow-tooltip> <template slot-scope="scope"> <el-upload class="upload-demo" :ref="scope.row.id+'uploadwj'" :data="extraData" :action="上传文件接口" :accept="uploadType" :limit="1" :on-exceed="handleExceed" :on-success="quillImgSuccesswj" :on-error="uploadError" :before-upload="quillImgBeforewj" :on-preview="handlePreviewwj" :before-remove="handleRemovewj" :file-list="scope.row.fileListwj"> <el-button size="small"><i class="el-icon-upload2" @click="curRowIndex=scope.$index"></i> 上传文件</el-button> </el-upload> </template> </el-table-column> </el-table> <form ref="downloadForm" :action="downLoadForm.action"> <input type="hidden" name="bodyurl" v-model="downLoadForm.bodyurl" /> <input type="hidden" name="token" v-model="downLoadForm.token" /> <input type="hidden" name="filename" v-model="downLoadForm.filename" /> </form> </template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
<script> import axios from 'axios' import { getToken} from "@/api/user"; //获取token接口 export default { methods: { // 上传正文 cellTable(row, column, event, cell) { this.clickId=row.id }, // render 事件 renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档 return h( 'div', [ h('span', column.label), h('span', { class:'Stat', }) ], ); }, handleRemovewj(file, fileList) { //删除文件 var filter_arr = this.tableData.filter((d) =>{ if(d.fileListwj && d.fileListwj.length>0){ return d.fileListwj[0].uid === file.uid } }); filter_arr[0].fileListwj = fileList.filter((v) => { return v.uid !== file.uid; }); return true; }, quillImgBeforewj(file, files) { //上传前判断 // console.log('quillImgBeforewj',file, files) // let b = filter_arr[0].fileListwj.filter((v) => { // return v.fileName === file.name; // }); let name = file.name.substring(file.name.lastIndexOf(".")).toLowerCase(); if(this.uploadType.indexOf(name)==-1){ this.$message.error(`含有不支持的文件类型:${name}`); return false } if (file.size > this.uploadSize * 1024 * 1024) { this.$message.error("上传文件过大"); return false; } // if (b.length > 0) { // this.$message.error("不能上传重复文件"); // return false; // } }, handlePreviewwj(file, e) { //下载 this.axiosHandle(file,e) }, axiosHandle(file,e){ let loadingInstance = this.$loading({ lock: true, text: "正在请求数据中", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }); var url=file.fileUrl?file.fileUrl :file.textAddr axios({ method: "post", url:'判断文件是否存在的接口' }) .then((res) => { loadingInstance.close(); if (res.data.status === 0) { let url = '下载文件的接口' this.downLoadForm = { bodyurl: file.fileUrl ?file.fileUrl :file.textAddr, token: this.uploadToken, filename: file.fileName?file.fileName :file.textName, action: url, }; setTimeout(() => { this.$refs.downloadForm.submit(); }, 10); } else { this.$message.error(res.data.msg); } return false; }) .catch((err) => { loadingInstance.close(); this.$message.error("下载文件失败"); }); }, getT() { //获取token getToken() .then((res) => { if (res.code == 200) { if (res.data) { this.uploadToken = res.data; this.extraData.token = this.uploadToken; } } else { this.$message.error(res.msg); } }) .catch((err) => { this.$message.error("获取token失败"); }); }, handleExceed(files, fileList) { this.$message.warning( `当前限制选择 1 个文件，本次选择了 ${ files.length } 个文件，共选择了 ${files.length + fileList.length} 个文件` ); }, quillAll(res,file,fileAll){ if (res.status == 0) { if (res.value && res.value.length > 0) { axios({ method: "post", url: '上传文件的接口及参数' }) .then((res1) => { if(res1.data.status==402){ this.$message.error(res1.data.msg); return } let argfilename=res.value[0].fileName argfilename =argfilename.substring(0,argfilename.lastIndexOf('.'))+'.ofd' res1.data.value[0].name = argfilename; res1.data.value[0].fileName = argfilename; fileAll.push(res1.data.value[0]); }) .catch((err) => { }); } else { this.$message.error(res.msg); fileAll = fileAll.filter( (v) => v.fileName !== file.name ); } } else { this.$message.error(res.msg); fileAll = fileAll.filter( (v) => v.fileName !== file.name ); } }, quillImgSuccesswj(res, file,fileList) { //上传成功 var filter_arr = this.tableData.filter((d) => d.id === this.clickId); this.quillAll(res, file,filter_arr[0].fileListwj) }, uploadError() { this.$message.error("上传失败"); }, addRow(){ this.tableData.push({ fileListwj:[], id: new Date().getTime(), }) }, }, computed: { }, activated() { this.addRow() //初始化 this.getT() //获取token }, data() { return { tableData:[{ fileListwj:[], id: new Date().getTime(), }], clickId:'', } } } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
