<el-upload class="upload-demo" action="/admin/sys-file/upload" //定制网站文件上传路径 :headers="headers" //定制网站请求头配置信息 :file-list="fileList" //定制网站上传的文件显示列表, 格式如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] :limit="5" //定制网站设置最大允许上传个数 :on-exceed="handleExceed" //定制网站文件超出个数限制时的钩子 accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx" //定制网站接受上传的文件类型 :before-upload="beforeUpload" //上传文件之前的钩子,判断文件大小和格式是否符合 :before-remove="beforeRemove" //删除文件之前的钩子,若返回 false 或者返回 Promise 且被 reject，则停止删除停止执行handleRemove事件 :on-remove="handleRemove" //文件列表移除文件时的钩子 :on-preview="handlePreview" //点击文件列表中已上传的文件时的钩子 :on-success="handleSuccess"> <el-button size="small" type="primary">上传文件</el-button> <div slot="tip" class="el-upload__tip">最多可上传5个，文件大小不超过50MB</div></el-upload>import store from '@/store'data() { return { fileList:[], headers: { Authorization: 'Bearer ' + store.getters.access_token, 'TENANT-ID': '1564020210' }},methods: { //点击文件列表中已上传文件进行下载 handlePreview(file) { var a = document.createElement('a'); var event = new MouseEvent('click'); a.download = file.name; a.href = file.url; a.dispatchEvent(event); console.log(file) }, //上传文件大小和格式校验 beforeUpload(file){ var fileType =file.name.substring(file.name.lastIndexOf('.')+1) const isFile = fileType === "doc" || fileType === "docx" || fileType === "xls" || fileType === "xlsx" || fileType === "ppt" || fileType === "pptx" if (!isFile) { this.$message.error("请选择正确的文件格式") return false } const isLt50M = file.size / 1024 / 1024 < 50 if (!isLt50M) { this.$message.error("上传图片大小不能超过 50MB!") } return isLt50M && isFile }, //文件超出限制个数提示 handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }, //上传成功 handleSuccess(res, file, fileList){ let fileSize=res.data.fileSize/1024/1024 this.fileList.push({ name: file.name, fileSize:fileSize, url: res.data.bucketName + '/' + res.data.fileName }) console.info(fileList,"fileList") }, //文件移除操作 beforeRemove(file, fileList) { if(this.status=='view'){ this.$message.warning('不允许删除！') return false }else{ return true } }, //文件移除操作 handleRemove(file, fileList){ this.fileList=fileList }, //点击文件列表中已上传文件进行下载 handlePreview(file) { var a = document.createElement('a'); var event = new MouseEvent('click'); a.download = file.name; a.href = file.url; a.dispatchEvent(event); console.log(file) },}- 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
一、限制上传文件个数
可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。
二、 限制上传的图片格式和大小
使用 before-upload 限制用户上传的图片格式和大小。
三、点击已上传文件进行下载
实现这个功能主要用到element的on-preview钩子函数
四、查看时，不允许删除文件
主要用到before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false ，则停止删除，不在执行:on-remove="handleRemove"事件。
五、查看编辑显示后台保存已上传文件
查看和编辑按钮事件如下：
只需将存入后台的数据再放入this.fileList数组中即可。
rowEditForm(row, index){ this.fileList=[] getFileList(row.id).then(res=>{ var data= res.data.data if(data!=null&&data.length>0){ for(var i=0;i<data.length;i++){ this.fileList.push({ name: data[i].name, fileSize:data[i].fileSize, url: data[i].url }) } } })}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
原文连接: https://blog.csdn.net/weixin_44770377/article/details/107078454