欢迎加入前端交流群交流知识获取视频资料:

如何使用input[type='file']来上传文件呢?

html:

//angular
<input type="file" (change)="fileChange($event)" placeholder="上传文件">
//vue
<input type="file" @change="fileChange" placeholder="上传文件">

js:

    fileChange(event) {
let fileList = event.target.files;
if (fileList.length > ) {
let file = fileList[];
let formData = new FormData();
formData.append('uploadFile', file);
        //你的post接口,formData发送
this.upgradeService.postDeviceFile(formData, (res) => {
            })
      
}
}

serve:

注意这里发送请求的时候需要加上header让其以二进制文件流的形式去发送(formData)

        let headerHttp = new HttpHeaders();
headerHttp = headerHttp.append('Content-Type', 'application/zip');
headerHttp = headerHttp.append('Accept', 'application/zip');

input file上传文件的更多相关文章

  1. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  2. input file 上传文件

    面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...

  3. 在HTML5的 input:file 上传文件类型控制 遇到的问题

    1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept=& ...

  4. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

  5. 使用input file上传文件中onChange事件只触发一次问题

    每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...

  6. input file上传文件扩展名限制

    方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...

  7. input file上传文件弹出框的默认格式设置

    我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...

  8. input:file上传文件类型(记录)

    imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="fil ...

  9. angular input file 上传文件

    <body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)&qu ...

随机推荐

  1. zookeeper单机和奇数集群

    zookeeper单机和奇数集群 链接地址:https://www.cnblogs.com/lsdb/p/7297731.html

  2. 推荐10个超棒的jQuery工具 提示插件

    脚本之家 http://www.jb51.net/article/28525.htm

  3. RedHat/CentOS 手动挂载磁盘

    #创建挂载目录mkdir /mnt/sdamkdir /mnt/sdbmkdir /mnt/sdcmkdir /mnt/sddmkdir /mnt/sdemkdir /mnt/sdfmkdir /mn ...

  4. c++常用功能封装

    C++文件读写的封装 在C++开发中,文件读写是很常用的功能,出于代码复用的考虑,将它们进行封装. 其中,默认读写的文件是文本文件,并且需要按行处理.调用者只需要关注读取出来的每一行的处理方式.写文件 ...

  5. 杭电2054 WA

    #include<stdio.h> #include<string.h> ],b[]; int main() { ,len2=,i; ; scanf("%s" ...

  6. 搞不懂的算法-排序篇<2>

    上一篇排序算法<1>中,排序算法的时间复杂度从N2到NlgN变化,但他们都有一个共同的特点,基于比较和交换数组中的元素来实现排序,我们称这些排序算法为比较排序算法.对于比较排序算法,所有的 ...

  7. mvc cshtml 中赋值

    @{ var str = ""; str = item.ApplyStatus == ? ? ? ? "申请驳回" : ""; } < ...

  8. JS 实现1!+2!+3!+4!+5!+....+n!

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

  9. Teradata在大数据管理与分析领域连续18年评测排名第一

    Gartner 魔力象限介绍 Gartner(高德纳)全球最具权威的IT市场研究与顾问咨询公司,他总是不停地推出IT行业的各种报告以及著名的Gartner魔力象限. Gartner魔力象限通常从两个方 ...

  10. javaScript原型、闭包和异步操作

    同学们,这篇博客有点水了,并不是说我不想写这块的内容,是因为查了很多资料,看了很多帖子之后,发现园内王福朋老师写的这系列文章真的很好,他的这系列的博客我已经看了3.4遍了,每一次都有新的收获,我可写不 ...