代码语言：javascript复制
<!-- :data为上传后台额外的参数 -->
<!-- action为服务器链接 -->
<!-- getupload、getdel为上传成功和删除的钩子 -->
<el-upload accept="image/*" :data="upload"
action="http://uploadFile" :file-list="fileList" ref="upload"
list-type="picture" :on-success="getupload" :on-remove="getdel">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<script>
data() {
return {
fileList: [],
upload_list: [],
upload: {
data: 'file'
}
}
}
methods: {
//上传成功push到新的数组里面去
getupload(res, file, fileList) {
this.upload_list.push(res.info.url)
},
//删除图片通过indexOf拿取下标，再让下标去删除图片
getdel(file, fileList) {
var index = this.upload_list.indexOf(file.response.info.url)
console.log(index)
this.upload_list.splice(index, 1);
},
//提交打印出图片
getsubmit() {
console.log(this.upload_list)
}
//可清空上传的图片
getclear(){
this.$refs.upload.clearFiles()
}
</script>
