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

如何使用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. Dalvik虚拟机和JVM的对比

    Dalvik虚拟机与Java虚拟机有着很多相似的特性,都支持GC,JIT,JNI等等.其主要区别在于文件格式以及指令集不同,下面对两者的特性进行比较与讨论. Difference1:文件格式 Dalv ...

  2. JqGrid saveRow方法报404错误

    TCX_1807工艺配置/检测项配置页面为jqgrid可编辑页面,使用的脚本为 ){ jQuery('#gridList').saveRow(lastId, true);//保存上一个修改的单元行 } ...

  3. angular实现动态的留言板案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. in 与 exist , not in 与 not exist

    in和exists in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的. 如果查询的两个 ...

  5. 优动漫PAINT新建文件

    在优动漫PAINT软件中展开任何一项操作之前,都需要新建或打开图形文件.新建文件之后,用户可根据自己的需求进行相应的设置,这样将大大节省后期制作的时间! 在优动漫PAINT中新建图形文件的方法: 方法 ...

  6. MongoDB_基础知识

    mongoDB术语:database-数据库,collection-数据库表/集合,document-数据记录行/文档,field-数据字段/域,index-索引,primary key-主键(Mon ...

  7. 团体程序设计天梯赛-练习集-L1-026. I Love GPLT

    L1-026. I Love GPLT 这道超级简单的题目没有任何输入. 你只需要把这句很重要的话 —— “I Love GPLT”——竖着输出就可以了. 所谓“竖着输出”,是指每个字符占一行(包括空 ...

  8. 洛谷P1563 玩具谜题 简单模拟

    没意义,注意方向别判错. Code: #include<cstdio> #include<cstring> using namespace std; const int max ...

  9. ZooKeeper伪集群的搭建(Windows)

    首先下载 zookeeper 地址:https://www.apache.org/dyn/closer.cgi/zookeeper/ 1.下载完成解压后修改文件夹名字为zookeeper1,然后删除c ...

  10. Codeforces Round #471 (Div. 2)B. Not simply beatiful strings

    Let's call a string adorable if its letters can be realigned in such a way that they form two conseq ...