需求
文件上传提交后再编辑界面需要回显修改,这时候图片回显不出来。
预期效果
代码
<template>
<el-upload
:action="action"
:file-list="linkList"
list-type="picture-card"
:accept="'.jpg, .jpeg, .png, .gif, .webp'"
:limit="1"
:on-exceed="handleExceed"
:on-success="onSuccess">
<i class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
action: '...', // 自己的上传
link: '....', // 自己的图片路径
linkList: []
}
},
created() {
this.init()
}
methods: {
init() {
const arr = []
arr.push({ url: this.link }) // 如果路径是不完全的可以再这里补齐
this.linkList = arr
},
// 文件上传 超出个数限制
handleExceed(files, fileList) {
this.$message({
type: 'warning',
message: '超出最大上传文件数量的限制!'
})
return false
},
onSuccess(res, file, fileList) {
if (res.code === 200) {
...
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
}
}
}
</script>