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

如何使用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. winfrom窗体属性

  2. 定义maven的项目结构

    创建一个Maven 的父项目 新建一个maven项目,选中create a simple project 填写以下内容: 如下内容: Group Id :edu.zipcloud.cloudstree ...

  3. Sql Server 连接池

    在看缓存的一篇文章中,看到连接池的三个字,来充充电. 原文连接 这篇讲了关键字 其实我们一直在使用SqlServer的连接池.在连接字符串中,Pooling为是否启用连接池,默认值为true,表示启用 ...

  4. 几个概念:x86、x86-64和IA-32、IA-64

    最近在学习操作系统方面的知识,学习操作系统难免要和CPU打交道,虽然现在CPU和操作系统不像计算机发展初期一样是绑定在一起的,但是大家都知道操作系统和CPU Architecture的联系是很紧密的, ...

  5. Sql Server 优化----SQL语句的执行方式与锁以及阻塞的关系

    阻塞原因之一是不同的Session在访问同一张表的时候因为不兼容锁的原因造成的, 当前执行的SQL语句是否被阻塞(或者死锁),不仅跟当前表上的已有的锁有关,也会跟当前执行的SQL语句的执行方式有关 简 ...

  6. WP - 控件基础-按钮控件

    Button:HyperlinkButton:RepeatButton:ToggleButton 1.Button:    <button content="Button" ...

  7. Programming Recipes

    Recipes是从一本书上看来的,即有诀窍又有食谱的意思.这里想记一些工作中遇到的问题和解决方法,说决窍有点过了,说食谱照单做又不足,所以Recipe这个词两个意思都有混合起来正合适. 1.Windo ...

  8. 开启RxSwift之旅——开篇

    开启RxSwift之旅——开篇 RxSwift 是 ReactiveX 在 Swift 下的实现.ReactiveX 是一个通过使用可观察序列来组合异步和基于事件的程序的库. 很多地方通常把 Reac ...

  9. React从安装到实战

    建议:初学者看之前请先看一遍菜鸟教程 可以安装一个ATOM编辑器,本人觉得很好用 一.安装并启动项目:网址  搭建好的项目目录为: 二.开始写项目: 1.组件到界面流程: 定义一个组件app.js导出 ...

  10. 安装sublimeServer插件

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