<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预览本地图片的更多相关文章

  1. IE7+ 浏览器兼容预览本地图片

    css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...

  2. 预览本地图片原生js

    <!-- 样似总结: 用a标签代替file,做文件上传. 将file进行绝对定位,透明度设置为0:宽度为“上传图片”的宽度,超出部分隐藏. 这样做是为了将file隐藏起来.用a标签代替file ...

  3. javascript预览本地图片

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery预览本地图片

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  5. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  6. es5预览本地文件、es6练习代码演示案例

    es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...

  7. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  9. 小程序 canvas实现图片预览,图片保存

    wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...

随机推荐

  1. Java生鲜电商平台-系统异常状态的设计与架构(APP应用或者生鲜小程序)

    Java生鲜电商平台-系统异常状态的设计与架构 说明:在实际开发Java生鲜电商平台的时候,异常状态的设计关系着整体系统的性能问题,架构设计,以及稳定性方面,对此,我根据实际的业务场景,进行了系统设计 ...

  2. Liu Junqiao:工作中用到的命令以及问题汇总

    工作中用到的命令以及问题汇总 2019-11-29 查看系统运行时间,这个问题是因为我们在阿里云上有个机器,在某一天发现这台机器上有的服务莫名奇妙的停了,然后排查时怀疑机器被重启过用如下如下命令查看了 ...

  3. avd manger创建的虚拟机启动不起来,或者启动起来后黑屏

    最近鼓捣安卓虚拟机,整的都差点重装系统,刚开始下载了genymotion_vbox,装完以后要在vbox中导入一个虚拟机,结果我导入完,虚拟机怎么也启动不了,然后各种找办法无果,最后重启电脑发现电脑也 ...

  4. 【搬了一套别人的cf】

    自己打了一堆没保存瞬间全没了.... 没有继续写的欲望 https://www.cnblogs.com/tea-egg/p/11664350.html

  5. 【洛谷5369】[PKUSC2018] 最大前缀和(状压DP)

    点此看题面 大致题意: 对于一个序列,求全排列下最大前缀和之和. 状压\(DP\) 考虑如果单纯按照题目中对于最大前缀和的定义,则一个序列它的最大前缀和是不唯一的. 为了方便统计,我们姑且规定,如果一 ...

  6. SpringData JPA实现增删改

    一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 四.controller中删除操作 五.controller中修改操作

  7. Hive部分函数解析

    Hive部分函数解析 Hive里的exists ,in ,not exists ,not in 相关函数 表数据准备: 1.选择指定数据库 eg:  use bg_database1; 2. 创建表 ...

  8. mpvue快速入门

    主要特性 使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: 彻底的组件化开发能力:提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案:方便构建 ...

  9. kaldi简介及安装

    操作系统 : Ubuntu18.04_x64 gcc版本 :7.4.0 简介 Kaldi诞生于2009年的JohnsHopkins University,刚开始项目重点是子空间高斯模型(SGMM)建模 ...

  10. DOM介绍以及使用方法

    DOM的基本讲解 一.DOM (Document Object Model)文档对象模型 1.有属性有方法 var person = { name:'派大星', fav:function(){ } } ...