Vue+element ui上传图片和视频并回显，点击放大查看和播放

1.上传图片

html代码:

<el-uploadaction="#":auto-upload="false":on-change="handleChange"
><el-button class="video_btn iconfont icontianjia3">上传图片</el-button>
</el-upload>
<divv-for="(item, index) in urlist":key="index"><el-image@click="Visibleimg(item)":src="item"></el-image>
</div>
<el-dialog :visible.sync="dialogVisibleimg"><img width="100%" :src="url" alt="" />
</el-dialog>

js代码:

handleChange(file, fileList) {//限制条件可以通过file判断，比如图片格式console.log(file, "file");console.log(fileList, "fileList");let formData = new FormData();formData.append("file", file.raw);//上传接口addupload(formData,1).then(res => {//拿到返回的路径let index = res.data.data.lastIndexOf("=");let path = res.data.data.substring(index + 1);this.$message.success("上传成功");//回显接口getEventpath(path).then(res => {//拿到图片路径回显let url = res.request.responseURL;this.urlist.push(url);});});
},
Visibleimg(val) {this.url = val;this.dialogVisibleimg = !this.dialogVisibleimg;
},

2.上传视频

html代码：


<el-uploadaction="#":auto-upload="false":on-change="videohandleChange"
><el-button class="video_btn iconfont icontianjia3">上传录像</el-button>
</el-upload>
<divv-for="(item, index) in urlistmovie":key="index"><video@click="Visiblemovie(item)"style="width: 100px; height: 100px;"><source :src="item" type="video/mp4" /></video>
</div>
<el-dialog :visible.sync="dialogVisiblevideo"><video controls="controls" style="width: 100%;"><source :src="movie" type="video/mp4" /></video>
</el-dialog>

js代码：


videohandleChange(file, fileList) {//限制条件可以通过file判断，比如视频格式console.log(file, "file");console.log(fileList, "fileList");let formData = new FormData();formData.append("file", file.raw);//上传接口addupload(formData,2).then(res => {//拿到返回的路径let index = res.data.data.lastIndexOf("=");let path = res.data.data.substring(index + 1);this.$message.success("上传成功");//回显接口getEventpath(path).then(res => {//拿到视频路径回显let url = res.request.responseURL;this.urlistmovie.push(url);});});
},
Visiblemovie(val) {this.movie = val;this.dialogVisiblevideo = !this.dialogVisiblevideo;
},

Vue+element ui上传图片和视频并回显，点击放大查看和播放相关推荐

vue element ui 上传图片压缩
1:将压缩js封装起来 /** 图片压缩,默认同比例压缩* @param {Object} fileObj* 图片对象* 回调函数有一个参数,base64的字符串数据*/export functi ...
Vue+element ui 上传视频
直接上代码 (利用了阿里云浏览器直传方式) <el-form-item label="视频:" :label-width="formLabelWidth" ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
vue+Element ui 实现照片墙
vue+Element ui 实现照片墙上面是我要实现的效果.直接上代码,间接明了 1.前端视图代码 <div><el-upload:file-list="fileLis ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...

Vue+element ui上传图片和视频并回显，点击放大查看和播放

Vue+element ui上传图片和视频并回显，点击放大查看和播放相关推荐

最新文章

热门文章