前言:

  • 组件库的文件上传不适合项目,这里我们利用input标签实现文件上传
  • 首先input type=file  标签是这个亚子的,而且样式不能改,我们利用css的方法,将一个定位到这个下面来,然后input标签opcity:0,就哦了

用法:

  • input的accept属性,支持选择的文件类型,win系统上,如果不是这个类型的文件,选择文件的时候是看不到的,并绑定ref属性
  • 利用inut的change事件,当选择文件的时候触发change事件,通过ref属性找到选择的文件对象(如下图),自己尝试着打印试试,这个就是后端需要的文件(包括文件名,大小等)
  • 然后上传文件的时候需要 new FormData() 得到实例对象,然后往这个实例对象里面append添加属性就好了,这里的属性就是后台需要的参数,调用接口即可
  • 必要的时候清空input的value,因为我们把input通过css opcity:0,看不到了,例如我们上传成功后应当清空input的value,如果不清空的话,其实选择的文件还是在的
  • multiple 属性可实现多文件上传

 1 <template>
2 <div id="app">
3 <div class="selectfile">选择文件</div>
4 <input accept=".png, .jpg" type="file" ref="file" @change="selectFile" />
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "app",
11 data() {
12 return {
13 filename: '',
14 selectFileobj: null
15 }
16 },
17 methods: {
18 // 选择文件
19 selectFile(e) {
20 console.log(this.$refs["file"].files);
21 console.log(this.$refs["file"].files[0]);
22 if (this.$refs["file"].files[0]) {
23 this.filename = this.$refs["file"].files[0].name;
24 this.selectFileobj = this.$refs["file"].files[0];
25 } else {
26 this.filename = "";
27 }
28 },
29
30 // 上传按钮
31 async Tofileupload() {
32 if (this.selectFileobj) {
33 let fd = new FormData();
34 fd.append("file", this.selectFileobj);
35 // fd.append("userId", this.userInfo.userId);
36
37 // const res = await importExcel(fd); // 调用接口实现文件上传
38 } else {
39 this.$message.warning("请选择要上传的文件");
40 }
41 },
42
43 // this.$refs['file'].value = '' // 必要的时候记得将选择的文件清空
44 },
45 };
46 </script>

vue上传文件(原生方法)的更多相关文章

  1. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  2. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  3. 朋友封装的一个ASP.NET上传文件的方法

    朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...

  4. MUI上传文件的方法

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 使用jquery插件uploadify上传文件的方法与疑问

    我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做.最近在做一个小项目需要上传图片,而且是需要用ajax的方式.但是利用jquery的ajax方法总会有 ...

  6. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  7. Vue上传文件:ElementUI中的upload实现

    一.上传文件实现 两种实现方式: 1.直接action <el-upload  .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...

  8. vue上传文件

    <div> <input type="file" class="file" name="file" @change=&qu ...

  9. Laravel操作上传文件的方法

    1.获取上传的文件 $file=$request->file('file');2.获取上传文件的文件名(带后缀,如abc.png) $filename=$file->getClientOr ...

  10. vue+上传文件夹

    在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...

随机推荐

  1. [cisco]Configure private VLAN

    vlan 100 private-vlan isolated ! vlan 200 private-vlan community ! vlan 300 private-vlan primary pri ...

  2. K8S二进制单节点部署

    一.常见的k8s部署方式 1.inikube: Minikube是一个工具,可以在本地快速运行一个单节点微型K8s,仅用于学习预览K8s的一些特性使用 部署地址: https://kubernetes ...

  3. NX二次开发 批量导出X_T(包括部件里的装配体)

    VS2019 NX1946 UF_initialize(); string filepath = strDir + "\\";//拼接路径 //获取图层过滤 PropertyLis ...

  4. [imx6ull] 源码下载

    uboot git clone https://source.codeaurora.org/external/imx/uboot-imx cd uboot-imx make distclean mak ...

  5. OD机试题-2022.4

    import java.util.ArrayList;import java.util.Comparator;import java.util.List;import java.util.Scanne ...

  6. SpringBoot整合RocketMQ案例实战

    一.概念 rocketMQ是一款典型的分布式架构下的中间件产品,使用异步通信方式和发布订阅的消息传输模型,具备异步通信的优势,系统拓扑简单,上下游耦合较弱,主要应用于异步解耦,流量削峰填谷等场景 二. ...

  7. ASP.NET Core - 配置系统之配置提供程序

    3. 配置提供程序 上面提到,通过 IConfigurationBuilder 的实现类对象,我们可以自由地往配置系统中添加不同的配置提供程序,从而获取不同来源的配置信息..NET Core 中,微软 ...

  8. 痞子衡嵌入式:Farewell, 我的写博故事2021

    -- 题图:苏州盘门景区 2021年的最后一天,按惯例写个年终总结吧.感觉今年过得异常快,新冠疫情虽然得到一定程度控制,但大家似乎再难回到疫情前的生活状态.如果你尝试去回顾 2020 - 2021 这 ...

  9. 组合构造和对应的OGF/EGF Dictionary 备查

    目录 Constructions Cycle Multiset construction Powerset construction Admissible unlabelled constructio ...

  10. 20张图说清楚 IP 协议

    大家好,我是风筝 轻解网络系列又来了,今天咱们说说 IP 协议,这可是网络协议中最最核心的一个协议了,还记得我们刚刚知道什么是IP地址.怎么给电脑修改 IP 的时候吗?今天我们就来探究一下 IP 协议 ...