element ui的upload组件上传图片成功和移除事件:
登录后获取到后台传的token存到中:
sessionStorage.setItem("token",data.obj.token);
用getItem取出:
sessionStorage.getItem('token')
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<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>
喜欢的给个赞吧!!!