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 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
工作中常用js功能汇总
Nov 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学习之PHP表达式
2006/10/09 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
python 文件与目录操作
2008/12/24 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
利用nohup来开启python文件的方法
2019/01/14 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
大三毕业自我鉴定
2014/01/15 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL