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. WPF自定义界面WindowChrome

    WPF自定义界面WindowChrome 默认WPF的界面其实也还行,就是满足不了日渐增长的需求,界面还是需要有更高的自定义程度,包括标题栏也要能够塞下更多的操作控件. 默认窗口介绍 新建WPF项目, ...

  2. 论文翻译:2019_Deep Neural Network Based Regression Approach for A coustic Echo Cancellation

    论文地址:https://dl.acm.org/doi/abs/10.1145/3330393.3330399 基于深度神经网络的回声消除回归方法 摘要 声学回声消除器(AEC)的目的是消除近端传声器 ...

  3. mybatis 内部定义对象和集合

    mapper 配置文件中  引入两个重要的标签:association和collection标签.

  4. Unsupervised Feature Learning via Non-Parametric Instance Discrimination

    目录 概 主要内容 Wu Z., Xiong Y., Yu S. & Lin D. Unsupervised Feature Learning via Non-Parametric Insta ...

  5. 代码质量管理sonarqube部署使用

    一.sonarqube的部署 1.下载sonaqube:https://www.sonarqube.org/downloads/ 根据需要下载特定版本: 2.如果通过sonar-scanner进行代码 ...

  6. <数据结构>拓扑排序

    有向无环图 有向无环图(Directed Acycilc Graph, DAG):从任意顶点出发都无法回到自身的有向图. 拓扑排序 定义 任一两个顶点u,v间,如果存在边u->v,则排序后u一定 ...

  7. Java初学者作业——学生成绩等级流程图练习

    返回本章节 返回作业目录 在Word 中编写算法实现学生成绩等级的输出,并绘制对应算法的流程图. 功能要求:输入学生成绩,输出对应成绩等级,输出规则如下: 学生成绩区间 对应成绩等级 [90,100] ...

  8. linux的用户主目录(~)指向问题

    最近在Ubuntu上安装rabbitmq之后,发现~目录指向出问题了,原本~指向当前shell登录的用户主目录,如下图 现在变成了这样: 登录之后进入的不是~目录,而是直接显示的主目录,而~指向的目录 ...

  9. linux 设置开机自动启动应用

    作为一个开发,项目现在一般都是部署在虚拟机上的linux,数据库也是按照在l虚拟机上的linux,一旦关机了,在开机程序都没打开,又要一个个去开,很麻烦,所以现在我现在使用supervisor去做一个 ...

  10. httprunner2.0 概述及使用说明

    一.概述 HttpRunner是一款面向 HTTP(S) 协议的通用测试框架,只需编写维护一份 YAML/JSON 脚本,即可实现自动化测试.性能测试.线上监控.持续集成等多种测试需求. 二.系统流程 ...