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

如何使用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. Java 系列之spring学习--spring搭建(一)

    一.新建maven项目 二.引入spring jar包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xs ...

  2. (转) 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  3. jQuery基本选择器模块(二)

    选择器模块 1.push方法的兼容性(了解) 问题:IE8不支持aplly方法中的第二个参数是 伪数组 目标:实现 push 方法的浏览器兼容性问题 var push = [].push; try { ...

  4. 高德地图修改gps定位点样式

    效果图 navi_map_gps_locked.png 图片1 图片2 修改 MyLocationStyle myLocationStyle = new MyLocationStyle();//初始化 ...

  5. 【原创】打印GC log

    -verbose:gc -XX:+PrintGCTimeStamps -XX:+PrintGCDetails -Xloggc:c:/gc.log

  6. js 正则 测试

    var str0 = '2013-6-7()'; var AAAAADD = str0.match(/(\d)/g); //11个空字符串 //["2", "0" ...

  7. Java中 对象的创建于调用

    Main方法是程序的主入口,想要用某个方法必须在main方法中调用 创建对象: 类名 对象名 = new 类名(); 使用对象访问类中的成员: 对象名.成员变量: 对象名.成员方法(); 成员变量的默 ...

  8. Java中方法重载

    方法重载:指在同一个类中,允许存在一个以上的同名方法,只要它们的参数列表不同即可,与修饰符和返回值类型无关. 参数列表:个数不同,数据类型不同,顺序不同. 重载方法调用:JVM通过方法的参数列表,调用 ...

  9. SciSharpCube:容器中的SciSharp,.NET机器学习开箱即用

    SciSharp Cube 在Docker容器中快速体验SciSharp机器学习工具的最新功能. 项目地址:https://github.com/SciSharp/SciSharpCube 从Dock ...

  10. 安装sublimeServer插件

    1.安装目的 做练习在谷歌浏览器中遇到报错信息:axios.min.js:8 Failed to load file:///E:/%E8%87%AA%E5%AD%A6/vue%E5%AD%A6%E4% ...