vue问题三：element ui的upload组件上传图片成功和移除事件

element ui的upload组件上传图片成功和移除事件：

登录后获取到后台传的token存到中：

sessionStorage.setItem("token",data.obj.token);

用getItem取出：

sessionStorage.getItem('token')

<div class="addImg"><el-uploadref="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>

View Code

喜欢的给个赞吧！！！

转载于:https://www.cnblogs.com/M-miao/p/9838687.html

vue问题三：element ui的upload组件上传图片成功和移除事件相关推荐

基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
djnago+vue+element ui前后的分离上传图片并保存
文章目录准备一.Vue页面编写二.django接口编写 1.新建项目 2.引入库 3.写接口三.结果最后准备 python:3.7 django:3.1.2 一.Vue页面编写我前端的样 ...
vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素
解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传(主要是基于vue的element),图片路径都是固定写的,所以遇见过列表中多个 ...
element ui 多个子组件_vue前端UI框架，一点都不圆润，盘它！
面对众多vue前端UI框架,看着它们干干巴巴.麻麻赖赖的样子,一点都不圆润,跟我一起盘它! Vue移动端UI框架 1.Vux(star:15620) VUX(读音 [v'ju:z],同 views)是 ...

vue问题三：element ui的upload组件上传图片成功和移除事件

vue问题三：element ui的upload组件上传图片成功和移除事件相关推荐

最新文章

热门文章