elementui多图片上传与删除

最近在看elementui的图片上传,总结一下关于多图片上传以及获取删除后相应的图片列表,大概逻辑是这样子的

<el-upload
action="uploadUrl" // 文件上传的地址
list-type="picture-card" // 文件上传的类型
:file-list="ruleForm.fileList2"
:on-preview="handlePictureCardPreview" //已上传文件的回调函数
:on-success="uploadSuccess"
:on-exceed="handleExceed"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"> //移除文件的回调函数
:multiple //是否多选
:limit="9"
:headers='token' //设置请求头(一般用于携带token)
<i class="el-icon-plus"></i>
</el-upload>

data(){
return{
ruleForm.fileList2: [],
token: this.$store.state.use_id // 获取token(我存到了vuex中,因为我是在vuex中引入了'vuex-persistedstate'插件,实现了像localstorage的本地存储)
uploadUrl: process.env.API_ROOT + 'url' // 实现测试环境与线上的切换,process.env.API_ROOT是自己设定的名字不是写死的
}
}
// 方法
// 上传限制格式与大小（png,jpg,gif,jpeg），与2M，这边代码没有优化，自行解决
beforeAvatarUpload(file) {
const extension =
file.name.substring(
file.name.lastIndexOf('.') + 1,
file.name.length
) === 'png'
const extension1 =
file.name.substring(
file.name.lastIndexOf('.') + 1,
file.name.length
) === 'jpg'
const extension2 =
file.name.substring(
file.name.lastIndexOf('.') + 1,
file.name.length
) === 'gif'
const extension3 =
file.name.substring(
file.name.lastIndexOf('.') + 1,
file.name.length
) === 'jpeg'
if (!extension && !extension1 && !extension2 && !extension3) {
this.$message.error('文件格式有误!')
return false
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
return false
}
return extension || extension1 || extension2 || extension3 || isLt2M
},
// 超过文件限制提示
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 9 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
)
},
// 成功后
uploadSuccess(response, file, fileList){
if (response.code === 200) {
this.rueForm.fileList2 = fileList
this.$message.success('上传成功！')
} else {
this.$message.error(response.msg)
}
},
handleRemove(file, fileList) {
this.ruleForm.fileList2 = fileList
}
}

// 还有一点，很多人在fileList里面没有找到response，因为他用了element自定义的文件上传方式（http-request）,所以fileList是没有的，如果你也是这样，有一种办法就是每次上传成功后，将后台返回的地址手动的赋值给fileList中。

//  赋值多图片代码
this.ruleForm.fileList2 = [
{
name: 'imgName',
url: 'http://img.com'
},
{
name: '',
url: ''
}
]
// 注意，这里还有个小坑，就是提交成功后查看并编辑内容时，之前的图片没有response了,更新内容的时候需要做处理
if (v.hasOwnProperty('response')) {

} else {

}