template

<input type="file" ref="input_file" @change="fileChange" hidden>
<img :src="base64Img.join('')" alt=""> <!-- base64Img是个字节数组需要拼起来才能用 -->

 

script

data () {

  return {

    base64Img: []

  }

}

methods: {
  /* 由于无法获取到图片的绝对路径,故只能将文件转换后在显示 */
  fileChange (e) {
    let file = e.target.files[0]
    let reader = new FileReader()
    reader.onload = value = > {
      this.base64Img.push(value.target.result)
    }
    reader.readAsDataURL(file)
  }
}

  

活着的目的不在于永远活着,而在于永远活出自己。

Vue 之 浏览本地图片功能的更多相关文章

  1. UWP 浏览本地图片及对图片的裁剪

    原文:UWP 浏览本地图片及对图片的裁剪 1.前言 准备给我的校园助手客户端添加一个修改头像的功能,但是查了好多资料都没有找到裁剪图片的简单的方法,最后才找到这个使用Launcher调用系统组件的简单 ...

  2. DWZ集成的xhEditor编辑器浏览本地图片上传的设置

    有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...

  3. 🍓 vue循环渲染本地图片不显示? 🍓

    teamList: [{ title: '大数据拍牌', imgUrl: './img/data.jpg', introduce: '5星服务:强烈推荐', cost: '15000', bail: ...

  4. vue预览本地图片

    <template> <div> <a href="javascript:void(0);" @change="addImage" ...

  5. 【咸鱼教程】本地图片上传。动态GIF表情图生成

    本案例参考:http://emoji.decathlon.trustingme.cn/但是实现方式不一样. 教程目录一 head first二 打开本地图片功能三 拖拽和缩放手势,调整图片四 gifj ...

  6. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  7. 个人永久性免费-Excel催化剂功能第102波-批量上传本地图片至网络图床(外网可访问)

    自我突破,在100+功能后,再做有质量的功能,非常不易,相对录制视频这些轻松活,还是按捺不住去写代码,此功能虽小,但功课也做了不少,希望对真正有需要的群体带来一些惊喜. 背景介绍 图床的使用,一般是写 ...

  8. vue如何动态加载本地图片

    大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...

  9. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

随机推荐

  1. 【LeetCode】884. Uncommon Words from Two Sentences 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典统计 日期 题目地址:https://leetc ...

  2. Lucky Substrings

    而在26以内且属于fibonacci数列的数为1,2,3,5,8,13,21时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 A string s is LUCKY if ...

  3. Java编程基础

    JDK与JRE有什么区别 JDK:Java开发工具包(Java Development Kit),提供了Java的开发环境和运行环境. JRE:Java运行环境(Java Runtime Enviro ...

  4. electron串口通信使用serialport安装报错

    1.报错信息没有安装python环境 1 gyp ERR! find Python 2 gyp ERR! find Python Python is not set from command line ...

  5. 「影院售票系统」 · Java Swing + MySQL JDBC开发

    目录 文档说明: 一.语言和环境 二.实现功能 三.数据库设计 四.具体要求及推荐实现步骤 五.注意事项 六.评分标准 实现代码: 一.数据库: 二.Java Swing: com.ynavc.Bea ...

  6. Oracle对表空间、用户、用户权限的操作

    一.对表空间的操作 1.创建表空间(create tablespace) -- 'hpdb_tablespace' 指定表空间名称 -- 'e:\hpdb.dbf' 指定表空间数据文件名称 -- si ...

  7. XML解析的四种方式

    1.说明 XML是EXtensible Markup Language, 即可扩展标记语言, 是一种通用的数据交换格式, 它的平台无关性.语言无关性.系统无关性, 给数据集成与交互带来了极大的方便. ...

  8. SpringBoot集成Actuator端点配置

    1.说明 Actuator端点可以监控应用程序并与之交互. Spring Boot包括许多内置的端点, 比如health端点提供基本的应用程序运行状况信息, 并允许添加自定义端点. 可以控制每个单独的 ...

  9. Win10 开启 Hyper-V 及简单使用

    简介 Windows 10 上内置了 Hyper-V.Hyper-V 提供硬件虚拟化,每个虚拟机都在虚拟硬件上运行. 系统要求 Windows 10 企业版.专业版或教育版.家庭版.移动版.移动企业版 ...

  10. Mysql 性能优化记录

    记录工作中有关mysql性能优化的心得和经验 1. where条件中的字段 尽量建立索引 2. where条件中的查询条件等号左边尽量不做处理 如查询日期相关字段,尽量不使用date_fromat 或 ...