vue原生文件上传,可以多文件上传
1.单文件上传
<template>
<div>
<label for="fileInput">
<i aria-hidden="true" class="cursor">上传文件</i>
</label>
<input
v-show="false"
type="file"
id="fileInput"
@change="handleFileChange"
name="file"
ref="file"
/>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
handleFileChange(e) {
let _this = this;
let file = e.target.files;
console.log(file,"单文件流文件流");
}
}
};
</script>
<style lang="scss" scoped>
.cursor {
cursor: pointer;
color: #409eff;
font-size: 16px;
}
</style>
2.多文件上传
在input上加属性 multiple="multiple"
即可实现多文件上传,也可以设置文件上传类型是在input上加属性 accept=".xls, .xlsx"
<template>
<div>
<label for="fileInput">
<i aria-hidden="true" class="cursor">上传文件</i>
</label>
<input
v-show="false"
type="file"
id="fileInput"
@change="handleFileChange"
accept=".xls, .xlsx"
name="file"
ref="file"
multiple="multiple"
/>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
handleFileChange(e) {
let _this = this;
let file = e.target.files;
console.log(file,"多文件文件流文件流");
}
}
};
</script>
<style lang="scss" scoped>
.cursor {
cursor: pointer;
color: #409eff;
font-size: 16px;
}
</style>
vue原生文件上传,可以多文件上传的更多相关文章
- Spring Boot + Vue 前后端分离,两种文件上传方式总结
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 U ...
- 大文件上传、断点续传、秒传、beego、vue
大文件上传 0.项目源码地址 源码地址 :https://github.com/zhuchangwu/large-file-upload 它是个demo,仅供参考 前端基于 vue-simple-up ...
- 使用vue+iview实现上传文件及常用的下载文件的方法
首先说明一下,我们这次主要用的还是iview的upload上传组件,下面直接上代码 <Upload ref="upload" multiple='true' //是否支持多文 ...
- 使用原生Java Web来实现大文件的上传
版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- thinkphp如何一次性的上传多个文件,在文件域中可以多选?
可以做到类似于某度网盘的样式吗? 文件夹的命名, 可以用单数, 也可以用复数, 在同一个项目中, 只要统一就好了. 毕竟项目开发不同于英语写作. 建议使用缩写, 不管是不是缩写都用单数, 这样简洁,容 ...
- vue下载和上传excle数据文件,解析excel文件数据并存在数据库中
下载: VUE: window.open("xxxx/downloadOldTaskDataFile.do_", "_blank"); JAVA: /** * ...
- 使用html中的<input>标签上传多个文件(转)
如何使用html上传多个文件呢?我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 然后我尝试搜索英文"h ...
- 【JAVA】通过HttpURLConnection 上传和下载文件(二)
HttpURLConnection文件上传 HttpURLConnection采用模拟浏览器上传的数据格式,上传给服务器 上传代码如下: package com.util; import java.i ...
- 通过HttpURLConnection 上传和下载文件(二)
HttpURLConnection文件上传 HttpURLConnection采用模拟浏览器上传的数据格式,上传给服务器 上传代码如下: package com.util; import java.i ...
- C# HTTP系列13 以form-data方式上传多个文件以及键值对集合到远程服务器
系列目录 [已更新最新开发文章,点击查看详细] 类似于以下场景,将表单中的用户信息(包含附件)上传到服务器并保存到数据库中, <form id="form1" run ...
随机推荐
- Centos上配置nginx+uwsgi+负载均衡配置
负载均衡在服务端开发中算是一个比较重要的特性.因为Nginx除了作为常规的Web服务器外,还会被大规模的用于反向代理后端,Nginx的异步框架可以处理很大的并发请求,把这些并发请求hold住之后就可以 ...
- EXCEL2010分成多个窗口的,解决单个窗口显示多个文档的弊病
本操作需要修改注册表,请在修改之前导出要修改的项目以备份. 1.定位到[HKEY_CLASSES_ROOT\Excel.Sheet.12\shell\Open],导出保存.展开Open,将ddeexe ...
- .NET Core AWS S3云存储
前言 最近有需要用到AWS S3云存储上传附件,这里对利用.NET或.NET Core在调用SDK APi需要注意的一点小问题做个记录,或许能对后续有用到的童鞋提供一点帮助 AWS S3云存储 官方已 ...
- Guns自动化生成代码使用
一.Guns简介 Guns基于Spring Boot2,致力于做更简洁的后台管理系统.包含系统管理,代码生成,多数据库适配,SSO单点登录,工作流,短信,邮件发送,OAuth2登录,任务调度,持续集成 ...
- mysql提权神器
java -jar udf.jar 127.0.0.1 root 123456 [32/64]
- std::thread线程详解(1)
目录 目录 简介 线程的使用 线程的创建 线程的方法和属性 std::jthread (C++20) stop_token (C++20) 总结 Ref 简介 本文主要介绍了标准库中的线程部分.线程是 ...
- 【vue】常用指令
vue指令带有前缀 v-. 一.v-bind 单向数据绑定 在html中显示数据,除了使用插值表达式{{}}之外,也可以使用vue中的v-bind指令. ... ... <body> &l ...
- LVS之3---健康检查
LVS实现健康性检查功能 LVS高可用性 解决方案: 由Director对各RS健康状态进行检查,失败时禁用,成功时启用 keepalived heartbeat/corosync ldirector ...
- 元旦在家撸了两天Seata源码,你们是咋度过的呢?
撸Seata源码 2020年12月31日晚23点30分,我发了2020年的最后一个朋友圈:假期吃透Seata源码,有组队的吗? 不少小伙伴都来点赞了, 其中也包括Seata项目的发起人--季敏大佬哦! ...
- 迭代器设计模式,帮你大幅提升Python性能
大家好,我们的git专题已经更新结束了,所以开始继续给大家写一点设计模式的内容. 今天给大家介绍的设计模式非常简单,叫做iterator,也就是迭代器模式.迭代器是Python语言当中一个非常重要的内 ...