在vue中file不能像其他input一样使用 v-model 双向数据绑定,因为文件选择是只读,只能用onchange监控值得变化。

所有需要使用v-on:change去监控。

例1:

<input type="file" ref="file"/>
<span @click="getFile ">提交</span>
getFile () {
  console.log(this.$refs.file.files)
}

例2:

<input type="file" @change="getFile "/>
getFile (e) {
  console.log(e.target.files)
}


学习笔记-vue.js获取file文件数据的更多相关文章

  1. java学习笔记之IO编程—File文件操作类

    1. File类说明 在Java语言里面提供有对于文件操作系统操作的支持,而这个支持就在java.io.File类中进行了定义,也就是说在整个java.io包里面,File类是唯一一个与文件本身操作( ...

  2. 1.3(学习笔记)Servlet获取表单数据

    一.Servlet获取表单数据 表单提交数据经由Servlet处理,返回一个处理结果显示在页面上, 那么如何获取表单提交的参数进出相应的处理呢? 主要用到以下方法: String  getParame ...

  3. 学习笔记-vue.js快捷登录 enter

    一般监听在输入密码的input监听keyup事件,加enter修饰符.如果input是组件,加上.native修饰符.<div id="app"> <input ...

  4. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  5. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

  6. ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则

    ASP.NET MVC 学习笔记-7.自定义配置信息   ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...

  7. JavaSE学习笔记(14)---File类和IO流(字节流和字符流)

    JavaSE学习笔记(14)---File类和IO流(字节流和字符流) File类 概述 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 构造方 ...

  8. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  9. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

随机推荐

  1. js & disabled right click & disabled right menu

    js & disabled right click (() => { const log = console.log; log(`disabled copy`); document.bo ...

  2. FileReader, readAsText

    readastext filereader FileReader.readAsText() https://developer.mozilla.org/zh-CN/docs/Web/API/FileR ...

  3. 人物传记Kyle Tedford:数据环境生变,银行大数据风控怎么办?

    数据是金融业务的基石,监管集中清查大数据公司,很多东西在发生根本性改变,资金方做"甩手掌柜"的好日子不会重现.那些缺乏自主风控能力的金融机构,在未来的行业竞争中,恐无以立足了.近日 ...

  4. 系统错误,MSVCP100D.dll找不到或丢失!

    文章首发 | 公众号:lunvey 今日研究c++,找了一些示例程序,发现无法打开.弹出如下的报错提示: 作为新时代人类,遇见问题第一件事情就是问度娘.然而眼花缭乱的检索数据,大家众说纷纭,不知道如何 ...

  5. Python算法_递归:汉诺塔

    游戏链接:https://zhangxiaoleiv.github.io/app/TowerOfHanoi/Hanoi.html 汉诺塔游戏算法: 1 def hanoi(n,x,y,z): 2 if ...

  6. JS相关基础

    1. ES5和ES6继承方式区别 ES5定义类以函数形式, 以prototype来实现继承 ES6以class形式定义类, 以extend形式继承 2. Generator了解 ES6 提供的一种异步 ...

  7. windows下的python环境安装

    windows下python开发环境的搭建还是很方便的 python本体的下载可以通过官方渠道,也可以通过windows应用商店,这里推荐后者,因为前者还要设置环境变量,而且我设置了之后cmd下也没有 ...

  8. ============================================ 新的开始(前后端分离项目学习Vue+DRF)

  9. Mysql训练:where后不可以进行聚合函数的判断,而having可以进行聚合函数的判断

    力扣题目:查找重复的电子邮箱 编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. +----+---------+ | Id | Email | +----+---------+ | ...

  10. 微信小程序:将yyyy-mm-dd格式的日期转换成yyyy-mm-dd hh:mm:ss格式的日期

    代码如下: changeDate1(e) { console.log(e); var date = new Date(e.detail.value); console.log(date); const ...