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

如何使用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. P1732 活蹦乱跳的香穗子

    题目描述 香穗子在田野上调蘑菇!她跳啊跳,发现自己很无聊,于是她想了一个有趣的事情,每个格子最多只能经过1次,且每个格子都有其价值 跳的规则是这样的,香穗子可以向上下左右四个方向跳到相邻的格子,并且她 ...

  2. Python 之 基础知识(五)

    一.变量 1.引用 id() 函数传参 与 返回值 都是传递保存的数据的引用 2.可变和不可变类型(变量的引用地址只在赋值语句后变化) 不可变类型 内存中的数据不允许被修改 数字类型 int,bool ...

  3. [Intermediate Algorithm] - Smallest Common Multiple

    题目 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. 范围是两个数字构成的数组,两个数字不一定按数字顺序排序. 例如对 1 和 3 —— 找出能被 1 和 3 和它们之间所有数字整除的最小 ...

  4. Kattis - Different Distances

    Input The input file contains up to 10001000 test cases, each of which contains five real numbers, x ...

  5. DB2解决死锁

    方法一.查看db2diag.log文件 找到DeadLock or Lock timeout搜索 死锁或锁超时信息db2 force application(句柄ID)直接结束进程即可. 方法二.DB ...

  6. 路飞学城Python-Day153

    Scrapy核心组件

  7. SpringMVC源码阅读

    在研究SpringMVC工作流程的同时记录下过程,以便以后浏览. 版本号:5.0.4 前沿:我们在使用SpringMVC的时候会在web.xml中配置以下servlet <!-- 配置sprin ...

  8. C++基础 (1) 第一天 C++相对C的改进 命名空间 引用

    第一天 语法 STL 数据结构  设计模式… 2 C++语言的间接 C++ = C语言+面向对象 本贾尼 语言分类: 不关心效率 只关心架构:java/脚本语言 效率:(内存要自己管理了,操作指针)C ...

  9. Supervisor 从入门到放弃

    前言 Supervisor是一个客户端/服务器系统,允许其用户在类UNIX操作系统上控制许多进程.(官方解释) 简单点来讲,就是一个监控脚本运行的工具,不过他可以统一化管理,laravel的队列文档上 ...

  10. Python智能提示--提示对象内涵成员

    1. demo展示 2. 提示效果