前言

有很多时候，会有图片上传的需求，用户选择上传图片后，要求在界面进行显示，当点击保存，或者确定按钮的时候上传到服务器。
话不多说直接上代码

<div class="upload-con"><input type="file" @change="uploadImg" ref="uploadFile" name="file"style="width: 100%; height: 100%;cursor: pointer;position: absolute;left: 0;top: 0;opacity: 0"><img :src="imgUrl" alt="" style="width: 100%;height: 100%;position: absolute;left: 120px;"></div>

为了能让大家看的明白，所以很多样式是直接写的行内。
效果如下图：

这个背景图是UI小姐姐做的，在.upload-con’ 的背景里面
话不多说，直接上js代码：

     uploadImg() {//input的change事件this.uploadMsg = this.$refs.uploadFile.files[0]; //文件流this.imgUrl = this.getImg(this.uploadMsg); //图片地址},getImg(file) {let url = '';if (window.createObjectURL !== undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL !== undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL !== undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}

这样就将本地上传的图片显示在界面，同时存在定义的uploadMsg 变量里面，图片地址存在imgUrl 变量里面，当然上面的方法同样适用后台返回二进制流，前端 img 标签的显示图片问题
效果如下：

好了，就这样完美解决图片上传显示问题，还有后台返回二进制流显示的问题
转载需标注！
还请多多指教！

Vue上传图片图片，img标签显示图片相关推荐

vue上传图片，并回显图片
vue上传图片,并回显图片未用组件库,原生的input输入框提交这个看需求吧,用组件库的话,可以减少挺多代码的,但是这个的后端,因为只能单独提交照片,所以我就使用js了.逻辑绕绕的. <in ...
vue点击按钮弹窗显示图片
需求是根据当前表格的行数据来获取对应的图片.然后我的行数据里已经有了id值,图片的名称也是id值.所以先通过按钮点击获取对应行的数据.这是写在表格里的按钮. <template slot-sco ...
04环信聊天界面 - 发送图片消息和显示图片
1.在聊天控制器连线 /*** 点击上传图片*/ - (IBAction)showImgPickerAction:(UIButton *)sender {// 图片选择控制器UIImagePicker ...
电脑打开html不显示图片,网页不显示图片,详细教您网页不显示图片怎么解决
在使用电脑浏览网页的时候是不是有碰到过网页不显示图片的时候呢?有的时候可能是因为电脑网速慢.所以加载图片不成功!而有的时候是因为有些地方需要设置.那网页不显示图片怎么解决?下面,小编跟大家介绍网页不显 ...
php 显示图片,php随机显示图片的简单示例
本节主要内容: 介绍一个随机显示图片的php函数,多用于博客的展示窗.照片的随机展示等. 例子: /** * 功能:随机显示图片 * Filename : img.php * Usage: * ...
解决微信小程序安卓手机访问不到图片，无法显示图片
关于微信小程序不显示图片通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问本地图片:确定相对路径或者绝对路径正确微信小程序图 ...
点击查看图片---弹窗直接显示图片并带关闭按钮
做项目,有时候查看图片要直接跳转到一个新的页面,在显示图片.这样用户体验效果不好. 采用该方法,直接在当前页面分层弹窗并显示图片,体验效果大大提升! 采用Magnific Popup – 响应式 jQ ...
qt显示html富文本图片,Qt QLabel显示图片动画富文本
0 前言动画 QLabel 功能不少, 能够用来显示图片动画富文本this 1 效果.net 对于图片和动画, 先添加到资源文件再使用3d 右键 Resources -> 添加现有文件cod ...
解决图片上传显示图片慢的问题
问题描述:点击上传图片到服务器,接口回调成功,预览图片时加载慢原因:从服务器上下图片跟网络有关解决问题:上传图片成功预览本地图片 //上传文件接口uploadPic(event, num) {va ...

Vue上传图片图片，img标签显示图片

前言

Vue上传图片图片，img标签显示图片相关推荐

最新文章

热门文章