一，实现效果

二，实现代码

   <el-upload:action="host"list-type="picture"multiple:limit="1":data="{'sessionSecret':sessionSecret}"name='image'ref="my-upload":show-file-list="false":before-upload="beforeAvatarUpload":on-exceed="handleExceed":on-success="handleSuccess":file-list="fileList"><div class="pic-uploader"><div class="maskbox" v-if="fileList.length>=1"><img  :src="item.url" class="pic" v-for="(item,index) in fileList" :key="index"><div class="mask"><button @click.stop="deleteImg">删除</button></div></div><img v-else src="@/assets/picture.png" class="default-pic" /></div><el-button class="redBtn dpb borderBtn"  type="primary" >选择图片(200*200）</el-button></el-upload>

      // 图片上传成功回调handleSuccess(res, file) {this.fileList.push(file)   //将上传的图片预显在页面if(res.code=='10000'){this.ruleForm['img_url']=res.img_url     //将接口返回的图片地址存到表单}},//图片上传的校验-小于5MbeforeAvatarUpload(file) {const isLt2M = file.size / 1024 / 1024 < 5;if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 5MB!');}return isLt2M;},//上传图片超出数量的处理函数handleExceed() {this.$message.warning(`当前限制选择 1 张图片，鼠标移动到图片上可删除现有图片`);},// 删除图片deleteImg() {this.fileList=[]this.ruleForm['img_url']=''this.$refs['my-upload'].clearFiles();},

element-ui上传图片的使用upload相关推荐

element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...
element ui 上传图片
element ui图片上传 1.template 部分 2. script 部分 3. scss 部分这玩意很简单,记录一下吧,给入门的小白用下 1.template 部分 <templat ...
vue element ui 上传图片压缩
1:将压缩js封装起来 /** 图片压缩,默认同比例压缩* @param {Object} fileObj* 图片对象* 回调函数有一个参数,base64的字符串数据*/export functi ...
Vue+element ui上传图片和视频并回显，点击放大查看和播放
1.上传图片 html代码: <el-uploadaction="#":auto-upload="false":on-change="handl ...
使用element ui实现上传图片
项目场景: 例如:上传多张,单张图片问题描述 element ui 上传图片简单原因分析: 自己使用自己写的方法,耗费时间长,并且功能有错解决方案: el-upload(:action=&quo ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
djnago+vue+element ui前后的分离上传图片并保存
文章目录准备一.Vue页面编写二.django接口编写 1.新建项目 2.引入库 3.写接口三.结果最后准备 python:3.7 django:3.1.2 一.Vue页面编写我前端的样 ...
element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...

element-ui上传图片的使用upload

一，实现效果

二，实现代码

element-ui上传图片的使用upload相关推荐

最新文章

热门文章

element-ui上传图片的使用upload

一，实现效果

二 ，实现代码

element-ui上传图片的使用upload相关推荐

最新文章

热门文章

二，实现代码