vue+elementUI实现图片上传功能


Posted in Javascript onAugust 20, 2019

本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下

1、html

<el-form-item label="图片" prop="logo">
 <el-upload name="file" v-if="optype==0" 
  :action="'/upload'" 
  accept=".jpg, .png" 
  list-type="picture-card" 
  :file-list="fileLists" 
  :on-preview="handlePictureCardPreview" 
  :on-success="success" 
  :on-remove="handleRemove">
 <i class="el-icon-plus"></i>
 </el-upload>
 <!--大图弹出框-->
 <el-dialog :visible.sync="imgDialogVisible" size="full" :modal="false" title="查看大图片">
 <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>
</el-form-item>

2、定义

dialogImageUrl: '', 
imgDialogVisible: false, 
fileLists: [],

3、在需要使用的方法中给fileLists[]赋值

vm.fileLists = [];
if (row.logo != undefined && row.logo != "") {
 vm.fileLists.push({url:row.logo});
}

4、其他几个属性的方法

//删除图片
handleRemove(file, fileList) {
 this.form.logo=''
},
//查看大图
handlePictureCardPreview(file) {
 this.dialogImageUrl = file.url;
 this.imgDialogVisible = true;
},
//图片上传成功
success(response, file, fileList) {
 this.fileLists = [];
 this.fileLists = [file]
 this.form.logo = file.response.result;
},

5、图片上传的位置和路径是存在不同的表中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
详谈javascript异步编程
Feb 21 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 #Javascript
vue集成chart.js的实现方法
Aug 20 #Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 #Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 #Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 #Javascript
Vue实现购物车详情页面的方法
Aug 20 #Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 #Javascript
You might like
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
给ECShop添加最新评论
2015/01/07 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
javascript数组的使用
2013/03/28 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
微信小程序实现搜索历史功能
2020/03/26 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
python字符串连接的N种方式总结
2014/09/17 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python 生成图形验证码的方法示例
2018/11/11 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
怎样比较两个类型为String的字符串
2016/08/17 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
离婚财产分配协议书
2014/10/21 职场文书
管理失职检讨书
2015/05/05 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书