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 研究心得 取得属性的值
Nov 30 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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
Look And Say 序列php实现代码
2011/05/22 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
详解python里的命名规范
2018/07/16 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
python变量命名的7条建议
2019/07/04 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
小学三八妇女节活动方案
2014/03/16 职场文书
挂牌仪式主持词
2014/03/20 职场文书
艺术教育实施方案
2014/05/03 职场文书
应届生面试求职信
2014/07/02 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
详解Python中__new__方法的作用
2022/03/31 Python
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers