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

如何使用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. MVC中使用UpdateModel获取接口参数

    废话少说,直接上代码: 模型类定义: public class RequestModel { public string Name { get; set; } public float Age { g ...

  2. Centos7 docker nginx容器搭建

    一.安装docker http://www.cnblogs.com/WJ--NET/p/8553807.html 二.创建Dockerfile #创建文件夹 mkdir centos_nginx cd ...

  3. NFine平台去掉平台介绍页面出现的一系列问题

    1.去掉平台介绍页面要做的操作:数值Index页面的下面两处内容 2.注释掉以上两处内容后出现的问题:•当打开多个页面后,最先打开的第一个页面(如下图1的位置)点击×号不能关闭页面:•当打开多个页面后 ...

  4. 4185 Oil Skimming 最大匹配 奇偶建图

    题目大意: 统计相邻(上下左右)的‘#’的对数. 解法: 与题目hdu1507 Uncle Tom's Inherited Land*类似,需要用奇偶建图.就是行+列为奇数的作为X集合,偶尔作为Y集合 ...

  5. C#中null、""、string.empty区别

    (1)NULLnull 关键字是表示不引用任何对象的空引用的文字值.null 是引用类型变量的默认值.那么也只有引用型的变量可以为NULL,如果int i=null,的话,是不可以的,因为Int是值类 ...

  6. Computer Vision的尴尬

    原文: Computer Vision是AI的一个非常活跃的领域,每年大会小会不断,发表的文章数以千计(单是CVPR每年就录取300多,各种二流会议每年的文章更可谓不计其数),新模型新算法新应用层出不 ...

  7. (转)基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理

    http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是 ...

  8. javascript面向对象中继承实现的几种方式

    1.原型链继承: function teacher(name){ this.name = name; } teacher.prototype.sayName = function(){ alert(t ...

  9. USACO 2008 Nov Gold 3.Light Switching 线段树

    Code: #include<cstdio> #include<algorithm> #include<cstring> using namespace std; ...

  10. MaterialDesign动画

    一.概述 MaterialDesign设计理念 MaterialDesign动画 二.实例讲解 (1)Touch Feedback (2)Reveal Effect (3)Activity Trans ...