vue给input file绑定函数获取当前上传的对象完美实现方法

HTML

<input type="file" @change="tirggerFile($event)">

JS(vue-methods)

tirggerFile : function (event) {
 var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料)
 // do something...
}

如果直接在绑定的函数中传入this，则不能正确获取，且不能获取到相关的inputfile对象

PS：下面简单介绍下vue中如何用input file绑定img标签中的src

<img v-bind:src="lmodel">
<input v-model="lmodel" type="file">

ps: v-on:change="xxx", v-on="change:xxx".前者是现在的写法，印象中后者是被废弃的写法

总结

以上所述是小编给大家介绍的vue给input file绑定函数获取当前上传的对象完美实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue给input file绑定函数获取当前上传的对象完美实现方法

    HTML <input type="file" @change="tirggerFile($event)"> JS(vue-methods) tirggerFile : function (event) { var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料) // do something... } 如果直接在绑定的函数中传入this,则不能正确获取,且不能获取到相关的inp

  • Angular2里获取（input file）上传文件的内容的方法

    最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签. <input type="file" id="newUpload" > 然后想获取上传的内容,于是先想了个愚蠢的方法,先通过id获取到这个input标签,然后再获取其中上传的内容 const uploadsFile = document.getElementById(name).files[0]; 结果就报错了.然后看提示说HTMLEleme

  • jQuery实现input[type=file]多图预览上传删除等功能

    下面我们了解一下,多图上传时,怎么实现预览.上传.删除等功能.下图是功能实现的预览效果,虽然样式有点丑,不过功能还是实现了.话不多说,直接看代码会更直观一些. 首先定义一下基本格式,样式代码自行脑补: <body> <div class="upload-header"> <input id="upload" type="file" accept="image/*" multiple="m

  • .NET的DateTime函数获取上个月的起始和截止时间的方法

    本文实例讲述了.NET的DateTime函数获取上个月的起始和截止时间的方法.分享给大家供大家参考.具体分析如下: 报表中经常遇到的一个头疼的问题是需要自动选择过去一个月的数据作为当前报表输出.网上查询了一些.NET 的C#例子,发现都实现的比较复杂,其实这个问题可以很简单的通过.NET的DateTime函数来实现,因为.NET中给我们提供了当前天数--System.DateTime.Now.Day函数,还有增加天和月份的AddDays和AddMonth函数. 于是我们可以这样设想,当前时间 -

  • Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    在前端项目中,附件上传是很常用的功能,几乎所有的app相关项目中都会使用到,一般在选择使用某个前端UI框架时,可以查找其内封装好的图片上传组件,但某些情况下可能并不适用于自身的项目需求,本文中实现的附件上传区域支持超多类型附件分类型上传,并且可根据特定条件具体展示某些类型的附件上传,本文中是直接摘自具体的页面,后面会抽时间单独封装出来一个附件上传的组件. 一.Vue页面内附件展示区域代码 <div class="retuinfo"> <div class="

  • Vue实现带进度条的文件拖动上传功能

    Vue实现带进度条的文件拖动上传功能

    1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

  • SpringBoot+fileUpload获取文件上传进度

    我本人在网上找了很多关于文件上传进度获取的文章,普遍基于spring MVC 框架通过 fileUpload 实现,对于spring Boot 通过 fileUpload 实现的帖子非常少,由于小弟学艺不精,虽然 Spring Boot 和 Spring MVC 相差不大,只是配置方式的差别,还是搞了很久,上传此文章的目的是希望自己作为文本保留,以便日后查看备忘,并且希望通过我的例子可以帮助到其他人而已,如果各位大佬发现小弟对于某些知识有误解,还请不吝赐教,先谢谢各位前辈了! 写此篇文章之前我查

  • vue+flask实现视频合成功能(拖拽上传)

    vue+flask实现视频合成功能(拖拽上传)

    vue+flask实现视频合成 效果如下 拖拽上传我们之前一个文章有写过 //www.jb51.net/article/206543.htm 原理就是 监听drop事件 来获取拖拽的文件列表 上传文件 通过axios 上传文件 this,.fileList就是我们的文件列表 let files = this.fileList; let formd = new FormData(); let i = 1; //添加上传列表 files.forEach(item => { formd.append(

  • Node.js上传文件功能之服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件上传进度的方法?>.稍微回答了下,这里顺便整理出来,有同样疑问的同学可以参考. 下文主要介绍如何利用progress-stream获取文件上传进度,以及该组件使用过程中的注意事项. 利用progress-stream获取文件上传进度 如果只是想在服务端获取上传进度,可以试下如下代码.注意,这个模块跟Ex

  • django获取ajax的post复杂对象的实现方法

    django获取ajax的post复杂对象的实现方法

    一.django的request中post对象为空(即获取不到前台ajax传送的post对象) 1.将django的setting中的django.middleware.csrf.CsrfViewMiddleware注释即可. 2.或在from中添加{% csrf %},后台接受的方法上加语法糖:@csrf_exempt,注意添加引用模块 3.若以上操作后还是不行,则将form标签中的action属性去掉(这里只是针对ajax处理,非表单提交) 二.对于ajax的复杂对象,例如[{"id&quo

随机推荐