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

如何使用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. 本地文件SVN和 vs svn 插件的使用!!

    比如:客服端是用的TortoiseSVN-1.7.7.22907-x64-svn-1.7.5.msi 里面svn 版本是1.7.5 vs里的插件 也需要svn 版本是1.7.5 对应的AnkhSvn- ...

  2. gitlab quickly install

    一.安装gitlab依赖环境 yum -y install vim wget epel-release  yum install curl policycoreutils openssh-server ...

  3. CI中的文件上传

    //首先在控制器中装载url类和view视图: //在view视图中创建一个表单,注:在做文件上传一定要写encype=“multipart/form-data”: //form表单的提交页面应该使用 ...

  4. django URL多层路由

    一.多层路由 如果django里的app数量越来越多,那项目里的urls文件配置起来将会很麻烦,而且也不利于后续项目的改动和整理 所以看了杨老师的视频https://www.bilibili.com/ ...

  5. (转)ORA-01502

    问题:ora-01502 索引或这类索引的分区处于不可用状态 引发:移动数据表分区,导致索引失效 解决:重建失效索引 1. select index_name ,status  from user_i ...

  6. MeayunDB学习笔记(一) MeayunDB介绍及安装

    系列目录   MeayunDB介绍-高性能分布式内存数据库 MeayunDB学习笔记(一)MeayunDB介绍及安装 MeayunDB学习笔记(二)批量导入数据 MeayunDB学习笔记(三)索引应用 ...

  7. 模拟试题A

    模拟试题A 一.单项选择题(2′*12=24′) 1.下面各种坐标变换中,会产生变换前后维度的改变的是( ) A)建模变换 B)观察变换 C)投影变换 D)视口变换 2.下列描述深度缓冲消隐算法的特点 ...

  8. 杭电 1021 Fibonacci Again

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1021 解题思路:根据之前发现斐波那契数列的规律,即为f(n)能被3整除当且仅当n能被4整除. 于是联想 ...

  9. 03--SQLtie三言两语SQLtie链接(join)

    本文将从连接的理论和语法讲起,结合具体的例子,详细分析 SQL 连接. 之前对数据库的连接操作似懂非懂,大概知道是什么东西,但是面试笔试的时候被虐成渣,讲不清连接到底是什么.吃一堑,长一智.这就是所谓 ...

  10. Functor、Applicative 和 Monad(重要)

    Functor.Applicative 和 Monad Posted by 雷纯锋Nov 8th, 2015 10:53 am Functor.Applicative 和 Monad 是函数式编程语言 ...