element ui的upload组件上传图片成功和移除事件：
登录后获取到后台传的token存到中：
sessionStorage.setItem("token",data.obj.token);用getItem取出：
sessionStorage.getItem('token')<div class="addImg">
<el-upload
ref="upload"
class="wid"
:action="upimg"
list-type="picture"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-error="errorimg"
:on-success="handleSuccess"
:headers="headers"
:before-upload="brforeimg"
:limit="1"
:on-exceed="exceed"
>
<el-button size="small" type="primary" >添加图片</el-button>
</el-upload>
</div> <script>
export default {
data() {
return {
upimg:'http://47.106.198.122/api/CanteenAdmin/CanteenManagement/UploadImage',
// 新增上传图片
dialogImageUrl: '',
images:[
{url:''}
],
}
}，
//在上传图片前获取token，前提是已经存到sessionStorage中
computed:{
headers(){
return {
'token':sessionStorage.getItem('token')
}
}
},
methods: {
//移除图片时调用
handleRemove(file, fileList) {
console.log(file, fileList);
this.images[0].url='';
},
errorimg(res){
this.$message({
message:res.msg,
type: 'warning'
});
},
//上传时调用
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 上传成功时调用
handleSuccess(response){
// alert("DFSD")
this.addform.foodpic= response.data[0]
console.log(this.addform.foodpic) },
//上传图片前调用
brforeimg(file){
let token=sessionStorage.getItem('token');
console.log(sessionStorage.getItem('token'))
}, // 超出上传个数时调用
exceed(){
this.$message({
message: "只能选择一个图片",
type: 'warning'
});
},
}
}
</script>
喜欢的给个赞吧！！！