要实现
el-
upload上传文件后
点击预览的功能，可以通过以下步骤实现：
1. 在
el-
upload组件中添加一个自定义的slot，用于显示
预览按钮。
2. 在handle
FileChange函数中，将上传的文件保存到一个数组中，同时为每个文件生成一个唯一的id。
3. 在
预览按钮的
点击事件中，根据文件的id获取对应的文件内容，并将其显示在一个弹窗中。
4. 在弹窗中添加一个删除按钮，用于删除当
前预览的文件。
代码示例：
```
<
el-
upload
class="
upload-demo"
ref="
uploadFile"
:auto-
upload="false"
:action="testForm.actionUrl"
drag
:
file-list="testForm.
fileList"
:on-change="handle
FileChange"
:on-remove="remove
File"
:limit="1"
:on-exceed="overLimitCount"
>
<
el-button slot="trigger" size="small" type="primary">选择文件</
el-button>
<div slot="tip" class="
el-
upload__tip">只能上传jpg/png文件，且不超过500kb</div>
<
el-button slot="preview" size="small" type="text" @click="showPreview">
预览</
el-button>
</
el-
upload>
data() {
return {
testForm: {
fileList: [],
fileContentList: []
},
preview
FileId: '',
isShowPreview: false
}
},
methods: {
handle
FileChange(
files,
fileList) {
this.testForm.
fileList =
fileList
files.forEach(
file => {
const reader = new
FileReader()
reader.readAsText(
file.raw)
reader.onload = e => {
const
fileContent = e.target.result.replace(/\n|\r\n/g, '<br/>')
this.testForm.
fileContentList.push({
id:
file.uid,
content:
fileContent
})
}
})
},
showPreview() {
if (this.testForm.
fileContentList.length > 0) {
this.preview
FileId = this.testForm.
fileContentList[0].id
this.isShowPreview = true
}
},
remove
File(
file,
fileList) {
const index = this.testForm.
fileContentList.findIndex(item => item.id ===
file.uid)
if (index !== -1) {
this.testForm.
fileContentList.splice(index, 1)
}
},
removePreview() {
const index = this.testForm.
fileContentList.findIndex(item => item.id === this.preview
FileId)
if (index !== -1) {
this.testForm.
fileContentList.splice(index, 1)
this.isShowPreview = false
}
}
},
computed: {
preview
FileContent() {
const
file = this.testForm.
fileContentList.find(item => item.id === this.preview
FileId)
return
file ?
file.content : ''
}
}
```
3107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
