需求：用element-ui做后台管理，碰到使用图片上传修改和删除功能，刚开始想点击修改显示放一个img标签，但是和上传成功后的图片框样式不对，还不显示删除放大功能。
方案：查看文档发现,可以使用 file-list 绑定一个数组实现,具体如下
代码：
<template>
<el-table label="操作" width="200">
<template slot-scope="scope">
<el-button type="warning" icon="el-icon-edit" @click="btnAlter(scope.row)" />
<el-button type="danger" icon="el-icon-delete" @click="btnDel(scope.row.id)" />
</template>
</el-table>
<div>
<el-form>
<el-form-item label="轮播图">
<el-upload
ref="bb"
action="服务器地址"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove" // // 图片删除触发
:on-success="handleSuccess" // 图片上传成功触发
:file-list="echoImgList" // 图片列表
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible3" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
data(){
return{
echoImgList: [] // 图片列表
addList:{
} // 绑定的列表数据
}
},
methods:{
// 点击修改显示图片
// 点击修改获取到当前列表行的数据
btnAlter(data) {
this.addList = Object.assign({
}, data) // 把当前行数据复制给绑定数据
// 如果后台返回的图片字符串不为空
if (this.addList.img_list) {
this.echoImgList = [] // 先清空绑定的图片列表
const aa = this.addList.img_list.split(',') // 把图片字符串分割成数组
// 遍历图片数组 push到echoImgList绑定列表 然后点击修改的时候图片就会显示了
aa.forEach((item, index) => {
if (aa.length) {
this.echoImgList.push({
url: item,
name: index + '.png'
})
}
},
// 修改添加图片操作
handleSuccess(response, file, fileList) {
console.log(response)
console.log(file)
console.log(fileList) // 图片上传成功返回的图片数据列表
const aa = []
// 遍历这个列表
fileList.forEach(item => {
// 判断列表中的每一项是否有response属性（图片上传添加的对象和echoImgList添加的对象，里面的属性值不一样）
if (!item.response) {
aa.push(item.url)
} else {
aa.push(item.response.data.fileList[0])
}
})
console.log(aa)
this.addList.img_list = aa
},
// 修改删除某项图片 （方法相同）
handleRemove(file, fileList) {
console.log(file, fileList)
const aa = []
fileList.forEach(item => {
if (!item.response) {
aa.push(item.url)
} else {
aa.push(item.response.data.fileList[0])
}
})
this.addList.img_list = aa
},
}
}
</script>
// 之后就是点确认的时候把参数传给后台就可以了，后台如果要的是图片字符串，记得发送请求之前把数据转换一下