写的很慢,不知不觉这是第十篇了。但是我其他事情太多,只能抽空写下。现在angular4或angular2流行的上传方式是ng2-file-upload。它的功能很强大。但是我没有配置成可以跨域上传的。好像是不支持跨域上传,不知道对错。jquery的插件 jQuery File Upload 可以跨域上传。但是想在angular4内使用jquery插件。需要找到全局jquery对象。也是很麻烦。所以这里就自己实现一个可跨域上传的功能。

demo整体设计有三个站点,第一个是纯前台的,提供对html,js,各种资源的web访问支持就可以。可以用iis,apache,nginx 来支撑。第二个是纯后台的用来提供restful接口服务,这里用tomcat。第三个是资源站点。提供对用户上传的种种文件的访问,可以用iis,apache,nginx 。这里三个站点详细的url是:

①前台   http://121.42.203.123

  ②后台   http://121.42.203.123:8080

③资源站点  http://121.42.203.123:83

图片上传的流程是在前台站点上传文件,传递给后台站点的接口。后台站点把文件写到资源站点上。框架内图片上传是可以和表单上传混合在一起的。就是在一个post或put内,同时传递上传文件和表单数据。但是这样,上传功能就是和具体业务关联在一起。我们需要的通用性就丢失了。所以我的思路是父类组件内有一个文本框后面接一个按钮。点击按钮弹出子组件一个小窗口。在小窗口内上传文件。然后把远程的文件路径返回给父组件,传递到文本框内。做了两个例子。一个是添加或修改用户信息时。选取用户头像图片的。

   

还有一个是专门用来展示上传操作demo的

上传文件组件html代码如下,比较简陋,也没有预览功能。以后在扩展吧。

<template #templateUploadFile>
<div class="modal-header" style="background:#EAEAEA;">
<h5 class="modal-title pull-left">
<b>文件上传</b>
</h5>
<button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #form="ngForm" enctype="multipart/form-data" novalidate>
<input type="file" id="sef" name="sef" class="form-control" ngModel (change)="onSelectChange($event)">
<div *ngIf="this.isError==true" style="color:red">{{this.stringError}}</div>
</form>
</div>
</template>

  对应后台代码如下

 import { Component, OnInit, Input, Inject, ViewChild, TemplateRef, ElementRef, Output, EventEmitter } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class'; import { FileUploader, FileUploaderOptions } from 'ng2-file-upload';
import ConstantsList from '../../common/constants/config';
import { BackCode } from '../../module/common/common';
import { UserNews } from '../../module/business/login'; @Component({
selector: 'app-uploadfile',
templateUrl: './uploadfile.component.html',
styleUrls: ['./uploadfile.component.css']
})
export class UploadfileComponent implements OnInit { @ViewChild('templateUploadFile') public template: TemplateRef<any>;
modalRef: BsModalRef;
ModalConfig = { animated: false, keyboard: false, backdrop: true, ignoreBackdropClick: true, };
@Input() public userNews: UserNews;
@Output() weburl: EventEmitter<string> = new EventEmitter<string>();
isError:boolean = false;
stringError:string; constructor(private modalService: BsModalService, @Inject('public_service') private publicservice: any) { } ngOnInit() { } openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, Object.assign({}, this.ModalConfig, { class: 'modal-sm' }));
} closeModal() {
this.modalRef.hide();
this.modalRef = null;
this.stringError = '';
this.isError = false;
} public show() {
this.openModal(this.template);
this.stringError = '';
this.isError = false;
} onSelectChange(event: EventTarget) {
let eventObj: MSInputMethodContext = <MSInputMethodContext>event;
let target: HTMLInputElement = <HTMLInputElement>eventObj.target;
let files: FileList = target.files;
let file: File = files[]; if(this.checkIsImage(file.name) == true) {
this.isError = false;
this.stringError = '';
let postData = null;
let sendtoken: string = this.userNews.id + '-' + this.userNews.token + '-' + ConstantsList.runid; this.publicservice.postWithFile1(sendtoken, postData, files).then(ub => {
let bc: BackCode = ub as BackCode;
this.weburl.emit(ConstantsList.HOSTPIC + bc.id);
});
}
else{
this.isError = true;
this.stringError = '请确定文件格式为 jpg png jpeg bmp gif';
}
} checkIsImage(filename: string): boolean {
let filenameend:string = '|' + filename.slice(filename.lastIndexOf('.') + ) + '|';
if ('|jpg|png|jpeg|bmp|gif|'.indexOf(filenameend.toLowerCase()) !== -) {
return true;
} else {
return false;
}
} }

服务端ssm框架内,接收post的地方关键就是要添加下面几个信息。

  response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,OPTIONS,DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type,Access-Token");

 其他的接收文件。写文件网上都很多例子。这里用自定义的http头信息进行校验。防止其他路径上非法的post上传文件。但是不是绝对的。这里展示一下这个功能。

demo演示地址是  http://121.42.203.123

Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件的更多相关文章

  1. Angular4 后台管理系统搭建(1) - 建立一个通用的Wijmo5 flexgrid分页器组件

    17年4月,开始学习angular2,到5月跟着升级到angular4.目前还在学习,搭建中.我的最终目的是用angular4框架搭建一个后台管理系统.这里使用了三个关键的外部库. 1.使用admin ...

  2. Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  3. 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <

    html: 使用ajaxFileUpload插件做文件上传时,后台返回json格式的数据,js代码如下: 接下来,把结果错误信息打印出来: 先在网上找了下解决办法方案,stackoverflow上有说 ...

  4. 手把手教你实现一个通用的jsonp跨域方法

    什么是jsonp JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1 ...

  5. Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑

    这几天中了很多坑,尤其是两个大坑.先是运行环境的坑,在是flexgrid单元格内部模板的坑.这里记录下. 一开始我遇见一些很奇怪的问题,按网上的说法,别人这么写代码都正常,就在我机器上不正常.按以前的 ...

  6. 如何实现一个通用的IHttpHandler 万能的IHttpHandler HttpWebRequest文件上传

    昨天遇到一个比较奇怪的需求,大致是需要在服务器上部署一个http服务,但是服务的具体功能不知道,以后在客服端实现.这里介绍一下系统背景,有一个系统运(部署在美国)行了很多年了,给系统产生了很多文件,现 ...

  7. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  8. Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端

    要搞一个小型的cms内容发布系统 因为小程序上线之后,直接对数据库进行操作的话,慧出问题的,所以一般都会做一个管理系统,让工作人员通过这个管理系统来对这个数据库进行增删改查 微信小程序其实给我们提供了 ...

  9. java 附件上传时后台验证上传文件的合法性

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

随机推荐

  1. 团队项目beta 汇总

    一.冲刺计划安排 http://www.cnblogs.com/KKlist/p/6864124.html 二.七天的敏捷冲刺 第一天(2017.05.19) http://www.cnblogs.c ...

  2. 201521123039 《java程序设计》第一周学习总结(新)

    1.本章学习总结 -Java是面向对象的程序语言,它一切定义都是对象.我们所编写的Java程序经过编译后生成了.class的文件,再经过JVM对.class解释运行就可以得到Java程序,所以Java ...

  3. 201521123096《Java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  4. 201521123068 《java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  5. Thinkphp3.2结合phpqrcode生成二维码(含Logo的二维码),附案例

    首先,下载phpqrcode,将其解压到项目ThinkPHP\Library\Vendor目录下.Index_index.html(模板可自行配置) <form action="{:U ...

  6. 利用Vim提供的正则去掉代码每行开头不想要的行号以及vi常见问题和应用技巧

    看到一不错的代码片断,但奈何无论怎么拷贝,粘贴到VS里都是带行号的,300多行的代码手工删除行号与前面的空格可得耗不少时间...这时想起了无所不能的VIM,以及它的正则,它的替换功能.解决步骤: 1. ...

  7. java基础知识3--如何获取资源文件(Java中获取资源文件的url)

    java开发中,常见的resource文件有:.xml,.properties,.txt文件等,后台开发中经常用到读取资源文件,处理业务逻辑,然后返回结果. 获取资源文件的方法说明getResourc ...

  8. 自定义BaseServlet利用反射

    比较完美一点的BaseServlet package com.yangwei.mvc.servlet; import java.io.IOException; import java.lang.ref ...

  9. Django实现内容缓存

    1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作,都会 ...

  10. Ansible系列(七):执行过程分析、异步模式和速度优化

    本文目录:1.1 ansible执行过程分析1.2 ansible并发和异步1.3 ansible的-t选项妙用1.4 优化ansible速度 1.4.1 设置ansible开启ssh长连接 1.4. ...