在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. React Native & Android & Text Input

    React Native & Android & Text Input react native clear input value https://stackoverflow.com ...

  2. WebRTC 信令服务器

    WebRTC 信令服务器 node.js & V8 libuv socket.io https://socket.io/ node-static SSR https://github.com/ ...

  3. D language

    D language https://en.wikipedia.org/wiki/D_(programming_language) Dart https://dlang.org/ flutter fr ...

  4. VSCode & disable telemetry reporting

    VSCode & disable telemetry reporting https://code.visualstudio.com/docs/supporting/faq#_how-to-d ...

  5. AtCoder Beginner Contest 192 F - Potion

    题目链接 点我跳转 题目大意 给定 \(N\) 个物品和一个 \(X\) ,第 \(i\) 个物品的重量为 \(ai\),你可以从中选择任意个物品(不能不选) 假定选择了 \(S\) 个物品,物品的总 ...

  6. 24_MySQL插入insert语句

    本节涉及SQL语句: -- MYSQL 基础操作 1.插入insert语句 INSERT INTO t_dept(deptno,dname,loc) VALUES(70,"后勤部" ...

  7. MacOS下PHP7.1升级到PHP7.4.15

    最近写SDK的时候需要用到object类型提示符,PHPStorm智能提示说需要PHP7.2以上才能支持这种类型提示. 我一查我本机的PHP是7.1.30版本,于是考虑升级一下PHP版本. 首先要尝试 ...

  8. 开源OA办公平台搭建教程:O2OA表单中的事件

    1. 概述 我们设计表单的时候经常会有这样的需求:在表单或者组件加载前/加载后,能够执行一些脚本来改变表单或组件的样式和行为.或者用户在点击组件的时候能够执行脚本.表单的事件就是为这样的场景而设计. ...

  9. 怎么去掉右下角的thinkphp的图标

    关闭thinkphp右下角的trace可以试试以下步骤: 1.在入口文件index.php 加入 define("APP_DEBUG", false); 2.在config.php ...

  10. 使用gitlab构建基于docker的持续集成(一)

    使用gitlab构建基于docker的持续集成(一) gitlab docker aspnetcore 持续集成 开篇 整体环境规划 准备工作 CA证书 虚拟机系统:安装Centos7.3 3.设置C ...