<template>
<div class="body">
<span>测试</span>
<span>照片墙</span>
<el-upload :file-list="imgList" :action="this.$store.state.updataurl" :headers="headers"
list-type="picture-card" :on-success="handleSuccess" :on-remove="handleRemove">
<div>
<span>点击上传图片</span>
</div>
</el-upload>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
imgList: [],
picUrl: this.$store.state.baseurl,
}
},
computed: {
headers() {
return {
Authorization: this.$store.getters.token || localStorage.getItem("token"),
// soloFileName: 'goods' //后端标识
};
},
},
methods: {
handleSuccess(response, file, fileList) {
if (file.response.code == 200) {
// 注意obj对象里url字段
let obj = {
// name:file.response.data.fileName,
url: this.picUrl + file.response.data.src
}
// setTimeout(()=>{ //防止闪烁,后来发现没用,偶尔有用
// obj = {
// name:file.response.data.fileName,
// url: this.picUrl + file.response.data.src
// }
// },200)
this.imgList.push(obj) //放进去图片
console.log("handleSuccess", this.imgList)
}
},
handleRemove(item) {
this.imgList.forEach(async (v) => {
if (v.url == item.url) {
// 调用接口删除图片
const res = await this.$API.Img.deleteFile(item.url)
if (item.id) {
// 删除商品的图片
const res1 = await this.$API.Img.deleteImg(item.id)
}
}
})
this.imgList = this.imgList.filter(v => v.url !== item.url)
},
}
}
</script>
<style lang="less" scoped>
</style>
element-ui 照片墙
猜你喜欢
转载自blog.csdn.net/Ann_52547/article/details/130391906
今日推荐
周排行