vue 中获取文件数据的两种方式

最新推荐文章于 2024-06-12 14:55:01 发布
最新推荐文章于 2024-06-12 14:55:01 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： work 文章标签： vue.js
原文链接：https://www.cnblogs.com/sunday123/p/11504885.html
版权 
// 例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) 

}

 

不学无术小垃圾
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何使用sourcetree + gitlab 合并多条commit
嘉禾天成‘s Blog
02-03 1360
如图所示，如果想将篮框内的几次commit合并，则应当在“master”主分支按如下操作： 即在要合并的第一个历史节点的上个节点右键，选择“重置当前分支到此次提交”； 在执行完该步骤后，会有文件改动。此时将文件改动“提交”，写好描述； 提交完后如图： 然后再进行推送，推送时候要选择强制推送： 推送完后图一中从黄色框选中的节点开始，到红色框选中的节点之前的3个节点就会被...
vue中读取文件
做一个有知识的流氓
07-09 1292
【代码】vue中读取文件。
vue读取本机的excel文件
最新发布
weixin_45856221的博客
06-12 248
第二种，结合element UI 的upload。非elementUI使用。
javaweb解决表单重复提交问题
weixin_44374938的博客
02-02 733
javaweb解决表单重复提交问题一、表单重复提交的三种情况：二、解决方法：1.验证码的原理2.谷歌验证码的使用3.验证码的刷新 一、表单重复提交的三种情况： 1.提交完表单。服务器使用请求转来进行页面跳转。这个时候，用户按下功能键F5，就会发起最后一次请求。造成表单重复提交问题。解决方法：使用重定向来进行跳转。 因为重定向其实就是发生了一次服务器请求。 2.用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败，就会着急，然后多点了几次提交按钮，也会造成表单重复提交
表单的重复提交
12-30 496
1. 什么是表单的重复提交? 前提: 在控制器中相应页面的形式为页面的转发而不是重定向. 1). 若刷新表单页面后, 再提交表单不算重复提交. 除此之外都算为表单的重复提交. 2). 在不刷新表单页面的前提下:   ①. 多次点击提交按钮  ②. 已经提交成功, 然后点击 "刷新(F5)"  ③. 已经提交成功, 按 "回退" 之后, 再点击 "提交按钮". 2. 重复提交由什么缺点: 1).
表单重复提交：
aa35434的博客
05-27 1476
解决方法：使用验证码。解决方法：使用验证码。
表单重复提交
qq_43696106的博客
11-16 208
1.点击了浏览器的后退按钮，然后再点击提交 2.网速较慢未完成响应时，重复多次点击提交 3.请求转发时，多次刷新页面（代表多次请求转发） 在表单请求一个servlet，而servlet又转发给了另一个servlet，这样就出现了重复提交。而请求重定向不会 ...
详解vue-cli中模拟数据的两种方法
08-27
本文主要介绍了两种在Vue CLI中模拟数据的方法：一种是使用`json-server`，另一种是通过`express`。这两种方法都有其特点和适用场景。 1. 使用`json-server`模拟数据： `json-server`是一个基于Node.js的简单工具...
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
10-20
本文将详细介绍两种在 Vue.js 应用中结合 jQuery AJAX 加载数据的方法。 首先，让我们看下示例代码中的HTML部分。这里创建了一个 Vue 组件，包含一个按钮和一个表格，表格用于展示从服务器获取的数据。`v-on:click`...
浅谈vue项目用到的mock数据接口的两种方式
10-16
本文将详细讲解在Vue项目中实现mock数据接口的两种常见方式：使用`devServer.before`和使用`Mock.js`。 1. 使用`devServer.before`进行数据mock 在Vue CLI的配置文件`vue.config.js`中，我们可以利用`devServer....
详解vue-router传参的两种方式
10-18
本文将深入探讨 Vue Router 中传参的两种主要方式：`params` 和 `query`。 1. `params` 参数： `params` 主要用于动态路由，通过在路径中使用冒号（`:`) 来定义参数。例如，路由 `/router1/:id`，这里的 `id` 就是...
Vue加载json文件的方法简单示例
10-17
以下是一个关于如何在Vue中加载JSON文件的简单示例，包括两种不同的实现方法。 **一、旧版方法** 在旧版Vue项目结构中，通常会使用Express.js作为后端服务器。首先，在`build/dev-server.js`文件中，你需要引入...
表单重复提交原因及解决办法
qq_44855188的博客
02-06 533
在写网站的登录与注册时最容易出现的就是表单重复提交问题，那么表单重复提交的原因是什么？ @PostMapping("/login") public String main(User user, HttpSession session, Model model){ //RedirectAttributes if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword()
有趣且重要的Git知识合集（8）git commit 重新提交（—amend —no-edit）
qq_39404437的博客
12-09 3263
当我们已经commit提交过一次了，然后发现还有些代码没改完，这个时候，很多童鞋都会考虑，再commit一次就行了，但是在git记录中就会出现两条commit，其实问题不大，但是如果有很多这种情况，就会使git变得混乱不堪，那么此时最好的情况，就是将多条commit合并在一起
MapReduce程序之Job提交源码
weixin_42796403的博客
11-19 216
MepReduce程序之Job提交源码 1）Job提交流程源码详解 waitForCompletion(true) submit(); // 1建立连接 connect(); // 1.1创建提交Job的代理 new Cluster(getConfiguration()); // 1.2判断是本地yarn还是远程 initialize(jobTrackAddr, conf); // 2 提交job submitter.submitJobInternal(Job.this, clus
git 未添加文件_git 如何查看某个文件历史记录（谁、什么时间添加修改）
weixin_28742653的博客
01-30 698
有一个合作开发项目(git仓库)，突然发现多了一个名为Untitled-1.html文件，一看就知道是无用文件。心想，谁这么不小心。想知道谁、什么时间添加的的某个文件，有以下几个方法：首先，切换到你要查看的分支。1. git log filename首先第一个想到的自然是查日志，git log file_name 会显示这个文件的修改记录。如果要具体看改了什么，找到对应的commit_id，然后 ...
Git命令个人记录
Krehizi的博客
11-18 1380
建立 1.配置身份: git config –-global user.name “name” git config –-global user.email “xx@xx.com” 2.查看身份: git config –-global user.name git config –-global user.email 3.定位: cdc: cd Users/xx/Android...
struts2防止表单重复提交（s:token）
苏苏爱自由
04-10 9943
说明 小例子 jsp页面 successjsp strutsxml UserAction类 运行结果 解决方法 方法1使用重定向 方法2使用stoken生成令牌配合token拦截器 jsp页面 strutsxml UserAction动作类 方法3使用stoken生成令牌配合tokensession拦截器说明防止表单的重复提交在我们的日常生活中有很大的重要性。 例如，如果在我们使用支付宝支付时，有
如何覆盖上一次commit_Git如何在已有的 commit 上再次提交？
weixin_35669769的博客
01-13 8722
在一些受管控的项目上，提交代码到 git 服务器后，还需要经过审核确认才正式合入版本，一般常用 gerrit 来进行审核确认操作。如果提交的代码审核不通过，需要再次修改提交。由于是修改同一个问题，我们可能不希望生成多个 commit 信息，会显得改动分散，看起来改动不完善，所以想要在本地已有的 commit 信息上再次提交改动，而不是在已有的 commit 上再新增一个 commit。使用 git...
vue读取json文件
08-11
你可以使用Vue中的内置方法或Vue插件来读取JSON文件。下面是两种常用的方法： 1. 使用Vue的内置方法： 在Vue组件中使用`axios`或`fetch`等工具库来发送HTTP请求并获取JSON数据。首先，你需要安装相应的库，例如axios，然后在组件中引入并发送请求。以下是一个简单的示例： ```javascript <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { items: [], }; }, mounted() { axios.get('data.json') .then(response => { this.items = response.data; }) .catch(error => { console.error(error); }); }, }; </script> ``` 在上面的示例中，我们在组件的`mounted`生命周期钩子中发送了一个GET请求，并将返回的JSON数据存储在`items`数组中。然后，我们可以在模板中使用`v-for`指令来遍历并显示数据。 2. 使用Vue插件： 你可以使用一些Vue插件来简化读取JSON文件的过程，例如`vue-json-csv`。这个插件提供了一个自定义指令，可以直接在模板中使用来读取和展示JSON数据。以下是一个示例： ```javascript <template> <div v-json-csv:src="jsonUrl"> <ul> <li v-for="(item, index) in $jsonCSV.data" :key="index">{{ item.name }}</li> </ul> </div> </template> <script> import VueJsonCsv from 'vue-json-csv'; export default { directives: { jsonCsv: VueJsonCsv, }, data() { return { jsonUrl: 'data.json', }; }, }; </script> ``` 在上面的示例中，我们使用了`v-json-csv`指令来读取JSON数据，并将数据存储在`$jsonCSV.data`中。然后，我们可以在模板中使用`v-for`指令来遍历并显示数据。 无论你选择哪种方法，确保在Vue组件中正确引入相应的库或插件，并根据你的需求进行相应的配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值