angularjs 上传

xxx.module.ts模块 
import { NgModule} from “@angular/core”; 
import { FileUploadModule } from “ng2-file-upload” ; 
import { XXXComponent } from “./xxx.component”;

@NgModule({ 
imports:[ 
FileUploadModule 
], 
declarations:[ 
XXXComponent ,/component,pipe,directive/], 
providers:[] 
}) 
export class XXXModule{}

xxx.component.ts组件 
import { Component} from “@angular/core”; 
import { FileUploader} from “ng2-file-upload/file-upload/file-uploader.class”;

@Component({ 
templateUrl:’xxx.component.html’ 
})

export class XXXComponent{ 
constructor(){ } 
public fileList; 
public uploadFile(event){ 
this.fileList = event.target.files; 
}

//上传 
public submitUploadFile(){ 
if(this.fileList.length>0){ 
let file:File = this.fileList[0]; 
let formData = new FormData(); 
formData.append(‘file’,file,file.name); 
let headers = new Headers(); 
headers.append(‘Accept’,’application/json’); 
let options = new RequestOptions({headers:headers}); 
this.http.post(url,formData,options) 
.map(res=>res.json()) 
.catch(error=>Observable.throw(error)) 
.subscribe(

//返回上传数据
  • 1
//success or fail
  • 1
)
  • 1
  • 2



}

xxx.component.html 
这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387166.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHPCMS的产品筛选功能

如下图所示功能&#xff1a; 首先&#xff0c;用下面这些代码替换掉phpcms/libs/functions/extention.func.php的内容 <?php /*** extention.func.php 用户自定义函数库** copyright (C) 2005-2010 PHPCMS* license http://www.phpcms.cn/licen…

程序员自身价值值这么多钱么?

xx 网络公司人均奖金 28 个月…… xx 科技公司人均奖金 35 个月…… 每到年底&#xff0c;这样的新闻在互联网业内简直是铺天盖地。那些奖金不高的程序员们一边羡慕嫉妒&#xff0c;一边暗暗比较一下自己的身价&#xff0c;考虑是不是该跳槽了。 不同水平的程序员&#xff0c;薪…

Spring MVC中使用 Swagger2 构建Restful API

0.Spring MVC配置文件中的配置[java] view plaincopy<!-- 设置使用注解的类所在的jar包&#xff0c;只加载controller类 --> <span style"white-space:pre"> </span><context:component-scan base-package"com.jay.plat.config.contro…

platform(win32) 错误

运行cnpm install后&#xff0c;出现虽然提示不适合Windows&#xff0c;但是问题好像是sass loader出问题的。所以只要执行下面命令即可&#xff1b;方案一&#xff1a;cnpm rebuild node-sass #不放心可以重新安装下 cnpm install方案二&#xff1a;npm update npm install no…

Error: Program type already present: okhttp3.Authenticator$1

在app中的build.gradle中加入如下代码&#xff0c; configurations {all*.exclude group: com.google.code.gsonall*.exclude group: com.squareup.okhttp3all*.exclude group: com.squareup.okioall*.exclude group: com.android.support,module:support-v13 } 如图 转载于:ht…

ES6规范 ESLint

在团队的项目开发过程中&#xff0c;代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的&#xff0c;这样做不仅可以很大程度地避免基本语法错误&#xff0c;也保证了代码的可读性&#xff0c;毕竟&#xff1a;程序是写给人读的&#xf…

前端 HTML 常用标签 head标签相关内容 script标签

script标签 定义JavaScript代码 <!--定义JavaScript代码--> <script type"text/javascript"></script> 引入JavaScript文件 src""引入的 js文件路径 <!-- 引入JavaScript文件 --> <script src"./index.js"></s…

ACM001 Quicksum

本题的重点在于数据的读入。 可采用cin.getlin()一行一行读入数据&#xff1b;也可采用cin.get()一个一个读入字符。 cin会忽略回车、空格、Tab跳格。 cin.get()一个一个字符读&#xff0c;不忽略任何字符。 cin.getline()一行一行读入。 #include<fstream> #include…

05 MapReduce应用案例03

8、PageRank Page-rank源于Google&#xff0c;用于衡量特定网页相对于搜索引擎索引中的其他网页而言的重要程度。 Page-rank实现了将链接价值概念作为排名因素。 算法原理 – 入链 投票 • Page-rank 让链接来“ 投票 “ ,到一个页面的超链接相当于对该页投一票。 – 入…

利用微信的weui框架上传、预览和删除图片

jQuery WeUI 是专为微信公众账号开发而设计的一个框架&#xff0c;jQuery WeUI的官网&#xff1a;http://jqweui.com/ 需求&#xff1a;需要在微信公众号网页添加上传图片功能 技术选型&#xff1a;实现上传图片功能可选百度的WebUploader、饿了么的Element和微信的jQuery WeUI…

【转】Java Socket编程基础及深入讲解

原文&#xff1a;https://www.cnblogs.com/yiwangzhibujian/p/7107785.html#q2.3.3 Socket是Java网络编程的基础&#xff0c;了解还是有好处的&#xff0c; 这篇文章主要讲解Socket的基础编程。Socket用在哪呢&#xff0c;主要用在进程间&#xff0c;网络间通信。本篇比较长&am…

使用 vue-i18n 切换中英文

使用 vue-i18n 切换中英文vue-i18n 仓库地址&#xff1a;https://github.com/kazupon/vue-i18n兼容性&#xff1a;支持 Vue.js 2.x 以上版本安装方法&#xff1a;&#xff08;此处只演示 npm&#xff09;npm install vue-i18n使用方法&#xff1a;1、在 main.js 中引入 vue-i18…

ZooKeeper数据模型

Zookeeper的数据模型 层次化的目录结构&#xff0c;命名符合常规文件系统规范&#xff08;Linux&#xff09; 每个节点在zookeeper中叫做znode,并且其有一个唯一的路径标识 节点Znode可以包含数据和子节点(即子目录)&#xff0c;但是EPHEMERAL类型的节点不能有子节点 Znod…

堆叠条形图

堆叠条形图 import pandas as pd import numpy as np import matplotlib.pyplot as plt import matplotlib as mpl import matplotlib.dates as mdates#解决能显示中文 mpl.rcParams[font.sans-serif][SimHei] #指定默认字体 SimHei为黑体 mpl.rcParams[axes.unicode_minus]Fal…

01 Python变量和数据类型

Python变量和数据类型 1 数据类型 计算机&#xff0c;顾名思义就是可以做数学计算的机器&#xff0c;因此&#xff0c;计算机程序理所当然也可以处理各种数值。 但是&#xff0c;计算机能处理的远不止数值&#xff0c;还可以处理文本、图形、音频、视频、网页等各种各样的数…

02 List、Tuple、Dict、Set

List 线性表 创建List&#xff1a; >>> classmates [Michael, Bob, Tracy] >>> L [Michael, 100, True] #可以在list中包含各种类型的数据 >>> empty_list [] #空List 按索引访问List&#xff1a; >>> print L[0] #索引从0开始…

利用layui前端框架实现对不同文件夹的多文件上传

利用layui前端框架实现对不同文件夹的多文件上传 问题场景&#xff1a; 普通的input标签实现多文件上传时&#xff0c;只能对同一个文件夹下的多个文件进行上传&#xff0c;如果要同时上传两个或多个文件夹下的文件&#xff0c;是无法实现的。这篇文章就是利用layui中的插件&am…

yzh的神仙题

U66905 zz题 考虑一个点权值被计算了多少次。。。不知 所以对未来承诺&#xff0c;方便直接算上总数&#xff01; 然后其实是给边定向&#xff0c;即先删除fa和son的哪一个 f[x][j]&#xff0c;会计算j次 无法转移 f[x][j][k]&#xff0c;其中会从子树计算k次。 当边从儿子指向…

利用Caffe实现mnist的数据训练

阿里云的参考文档&#xff1a;https://help.aliyun.com/document_detail/49571.html在文档里提供了caffe的一个案例&#xff0c;利用Caffe实现mnist的数据训练。准备的数据源可以在“深度学习案例代码及数据下载”页找到Caffe数据下载并解压。要训练自己的图片&#xff0c;还是…

06 函数式編程

1 函数式编程简介 函数&#xff1a;function 函数式&#xff1a;functional 一种编程范式 特点&#xff1a; 把计算视为函数而非指令 纯函数式编程&#xff1a;不需要变量&#xff0c;没有副作用&#xff0c;测试简单 支持高阶函数&#xff0c;代码简洁 Python支持的函数式…