vue预览本地图片
<template>
<div>
<a href="javascript:void(0);" @change="addImage" class="a">
<input type="file" class="fileopen" />上传图片
</a>
<img :src="imgsrc" alt class="imgview" accept="image/png, image/jpeg, image/gif, image/jpg" />
</div>
</template> <script>
export default {
data() {
return {
imgsrc: ""
};
},
methods: {
addImage() {
var input = document.querySelector("input");
//1. 拿到fileinput里面的文件, 这个file是一个file对象, file对象不能直接展示的
var file = input.files[0]; //2. 读取文件,成功img标签可以直接使用的格式
//FileReader类就是专门用来读文件的
var reader = new FileReader();
window.console.log(file); //3. 开始读文件
//readAsDataURL: dataurl它的本质就是图片的二进制数据, 进行base64加密后形成的一个字符串, 这个字符串可以直接作用img标签的图片资源使用 reader.readAsDataURL(file);
let _this = this;
//4. 因为文件读取是一个耗时操作, 所以它在回调函数中,才能够拿到读取的结果
reader.onload = function() {
window.console.log(reader.result);
//直接使用读取的结果
_this.imgsrc = reader.result;
};
_this.imgsrc = file;
}
}
};
</script> <style lang="less" scoped>
.imgview {
width: 150px;
height: 150px;
border-radius: 50%;
border: 1px solid red;
}
.a {
position: relative;
display: block;
text-decoration: none;
color: aqua;
}
.fileopen {
position: absolute;
left: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
width: 64px;
overflow: hidden;
}
</style>
vue预览本地图片的更多相关文章
- IE7+ 浏览器兼容预览本地图片
css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...
- 预览本地图片原生js
<!-- 样似总结: 用a标签代替file,做文件上传. 将file进行绝对定位,透明度设置为0:宽度为“上传图片”的宽度,超出部分隐藏. 这样做是为了将file隐藏起来.用a标签代替file ...
- javascript预览本地图片
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery预览本地图片
本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- es5预览本地文件、es6练习代码演示案例
es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- 小程序 canvas实现图片预览,图片保存
wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...
随机推荐
- Java生鲜电商平台-系统异常状态的设计与架构(APP应用或者生鲜小程序)
Java生鲜电商平台-系统异常状态的设计与架构 说明:在实际开发Java生鲜电商平台的时候,异常状态的设计关系着整体系统的性能问题,架构设计,以及稳定性方面,对此,我根据实际的业务场景,进行了系统设计 ...
- Liu Junqiao:工作中用到的命令以及问题汇总
工作中用到的命令以及问题汇总 2019-11-29 查看系统运行时间,这个问题是因为我们在阿里云上有个机器,在某一天发现这台机器上有的服务莫名奇妙的停了,然后排查时怀疑机器被重启过用如下如下命令查看了 ...
- avd manger创建的虚拟机启动不起来,或者启动起来后黑屏
最近鼓捣安卓虚拟机,整的都差点重装系统,刚开始下载了genymotion_vbox,装完以后要在vbox中导入一个虚拟机,结果我导入完,虚拟机怎么也启动不了,然后各种找办法无果,最后重启电脑发现电脑也 ...
- 【搬了一套别人的cf】
自己打了一堆没保存瞬间全没了.... 没有继续写的欲望 https://www.cnblogs.com/tea-egg/p/11664350.html
- 【洛谷5369】[PKUSC2018] 最大前缀和(状压DP)
点此看题面 大致题意: 对于一个序列,求全排列下最大前缀和之和. 状压\(DP\) 考虑如果单纯按照题目中对于最大前缀和的定义,则一个序列它的最大前缀和是不唯一的. 为了方便统计,我们姑且规定,如果一 ...
- SpringData JPA实现增删改
一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 四.controller中删除操作 五.controller中修改操作
- Hive部分函数解析
Hive部分函数解析 Hive里的exists ,in ,not exists ,not in 相关函数 表数据准备: 1.选择指定数据库 eg: use bg_database1; 2. 创建表 ...
- mpvue快速入门
主要特性 使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: 彻底的组件化开发能力:提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案:方便构建 ...
- kaldi简介及安装
操作系统 : Ubuntu18.04_x64 gcc版本 :7.4.0 简介 Kaldi诞生于2009年的JohnsHopkins University,刚开始项目重点是子空间高斯模型(SGMM)建模 ...
- DOM介绍以及使用方法
DOM的基本讲解 一.DOM (Document Object Model)文档对象模型 1.有属性有方法 var person = { name:'派大星', fav:function(){ } } ...