正文

angular4后台管理系统搭建（10）-做一个通用的可跨域上传文件的组件

author  author  2022-09-23  681

关键词：

写的很慢，不知不觉这是第十篇了。但是我其他事情太多，只能抽空写下。现在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>

　　对应后台代码如下

 1 import { Component, OnInit, Input, Inject, ViewChild, TemplateRef, ElementRef, Output, EventEmitter } from '@angular/core';
 2 import { BsModalService } from 'ngx-bootstrap/modal';
 3 import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
 4 
 5 import { FileUploader, FileUploaderOptions } from 'ng2-file-upload';
 6 import ConstantsList from '../../common/constants/config';
 7 import { BackCode } from '../../module/common/common';
 8 import { UserNews } from '../../module/business/login';
 9 
10 @Component({
11   selector: 'app-uploadfile',
12   templateUrl: './uploadfile.component.html',
13   styleUrls: ['./uploadfile.component.css']
14 })
15 export class UploadfileComponent implements OnInit {
16 
17   @ViewChild('templateUploadFile') public template: TemplateRef<any>;
18   modalRef: BsModalRef;
19   ModalConfig = { animated: false, keyboard: false, backdrop: true, ignoreBackdropClick: true, };
20   @Input() public userNews: UserNews;
21   @Output() weburl: EventEmitter<string> = new EventEmitter<string>();
22   isError:boolean = false;
23   stringError:string;
24 
25   constructor(private modalService: BsModalService, @Inject('public_service') private publicservice: any) { }
26 
27   ngOnInit() { }
28 
29   openModal(template: TemplateRef<any>) {
30     this.modalRef = this.modalService.show(template, Object.assign({}, this.ModalConfig, { class: 'modal-sm' }));
31   }
32 
33   closeModal() {
34     this.modalRef.hide();
35     this.modalRef = null;
36     this.stringError = '';
37     this.isError = false;
38   }
39 
40   public show() {
41     this.openModal(this.template);
42     this.stringError = '';
43     this.isError = false;
44   }
45 
46   onSelectChange(event: EventTarget) {
47     let eventObj: MSInputMethodContext = <MSInputMethodContext>event;
48     let target: HTMLInputElement = <HTMLInputElement>eventObj.target;
49     let files: FileList = target.files;
50     let file: File = files[0];
51     
52     if(this.checkIsImage(file.name) == true) {
53       this.isError = false;
54       this.stringError = '';
55       let postData = null;
56       let sendtoken: string = this.userNews.id + '-' + this.userNews.token + '-' + ConstantsList.runid;
57 
58       this.publicservice.postWithFile1(sendtoken, postData, files).then(ub => {
59         let bc: BackCode = ub as BackCode;
60         this.weburl.emit(ConstantsList.HOSTPIC + bc.id);
61       });
62     } 
63     else{
64       this.isError = true;
65       this.stringError = '请确定文件格式为 jpg png jpeg bmp gif';
66     }
67   }
68 
69   checkIsImage(filename: string): boolean {
70     let filenameend:string = '|' + filename.slice(filename.lastIndexOf('.') + 1) + '|';
71     if ('|jpg|png|jpeg|bmp|gif|'.indexOf(filenameend.toLowerCase()) !== -1) {
72       return true;
73     } else {
74       return false;
75     }
76   }
77 
78 }

View Code

服务端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

淘淘商城_0200_搭建后台管理系统

后台管理系统工程搭建项目是maven项目，Maven的工程类型： 1、war包工程：web工程2、Jar包工程：java工程，打完是一个jar包3、Pom工程：父工程，聚合工程　，这两个一般合起来用，pom工程即做父工程，又做聚合工程来聚合... 查看详情

vue+elementui搭建后台项目(代码片段)

...言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的... 查看详情

微信小程序需要后台吗?怎么搭建后台

...基本。参考技术B小程序后台的搭建可以用流行的CMS内容管理系统做，只要你的系统能够输出json数据就可以了，比如帝国cms,织梦cms等都是可以的。参考技术C需要……不过好像是自动的……由微信进行控制得参考技术D可以的，... 查看详情

angular4.0从入门到实战打造股票管理网站

第1章准备好了吗，那就开始吧！！！在这一章里，我们首先会对整个课程的内容做一个简要的介绍，包括章节的安排，实战案例的介绍以及前置知识的介绍等内容。然后我们会从一个比较高的视角对angularJS和angular的架构做一个... 查看详情

自动化监控系统搭建xadmin做网站后台

Django有个自带的admin后台，不过界面不怎么好看，这里我用xadmin 我的python版本是3.5，可以使用支持py3的xadmin：https://github.com/sshwsfc/xadminxadmin部署步骤：1、把xadmin整个目录拷贝到项目里面2、需要安装的依赖包：django~=1.9.0django-... 查看详情

如何使用laravel搭建后台登录系统

laravel只是一个php框架而已。你需要他来搭建后台登录的话，首先你得先安装laravel。对于laravel来说，一个后台的登录系统，半小时就能搞定。这就是laravel的强大之处。如何搭建后台登录系统，这个是和其它的php框架是一样的参... 查看详情

从零开始搭建vue+element-ui后台管理系统项目到上线(代码片段)

一起使用go(golang)来做一个后台管理系统系列10使用mod来管理包

参考技术A原项目采用gopath来管理的引用库，但有小伙伴反应说包不好下，虽然我把对应的包做了百度云盘共享，但小伙伴们仍然感觉不太好用。特别是最近把goSDK升级到1.18.在管理包上终于下决心使用mod来重新重构下包管理。一... 查看详情

用vue做网站后台(代码片段)

介绍：　　这是一个用vuejs2.0和element搭建的后台管理界面。相关技术：　　vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。　　element：基于vuejs2.0的ui组件库。　　vue-router：一般单页面应用spa... 查看详情

vue3从零开始搭建简单干净的后台管理系统(代码片段)

...a;记得自己大二时（2017年），想搭建一个后台管理系统，当时头脑想的是用原生JS写的。我肯定干不出来，后来乖乖用了当时比较流行的layui，就算现在也真的难以做下去。这几天，有了需要后端管理系... 查看详情

vuejs和element搭建的一个后台管理界面(代码片段)

react高效高质量搭建后台系统系列

react高效高质量搭建后台系统前言目标：用react高效高质量搭建后台系统如何实现：搞定一个优秀的、通用的、有一定复杂度的react的后台系统。类似项目就可以依葫芦画瓢快速展开。spug能否当此重任... 查看详情

Angular4如何启用测试覆盖率

】Angular4如何启用测试覆盖率【英文标题】：Angular4howtoenabletestcoverage【发布时间】：2017-10-1421:02:08【问题描述】：我正在做一个Angular4项目。我正在尝试设置代码覆盖率。我创建了一个非常简单的小应用程序。我阅读了所有可能... 查看详情

如何使用laravel搭建后台登录系统

1.如果前后台的账号不一样，推荐先安装https://github.com/sboo/multiauth来提供多用户登录的支持。2.然后可以使用https://github.com/FrozenNode/Laravel-Administrator来快速搭建后台，也可以自己使用模板来做。参考技术A首先确认，后台的用户表... 查看详情

vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇1(代码片段)

...cli，项目的基础搭建。本主题讲述了vue+element-uiJYAdmin后台管理系统模板-集成方案,从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板，还是一套企业级后台系统开发集成方案，致力于打造一... 查看详情

golanggo-admin系统进行项目开发，还是一个非常不错的项目，使用golang做管理后台，非常方便项目的快速搭建，基础功能鉴权已经完善了，就需要开发相关的业务逻辑即可。(代码片段)

目录前言1，关于go-admin2，使用go-admin进行构建3，使用go-admin进行数据库，后端初始化4，下载前端代码，进行node编译4，总结前言本文的原文连接是:https://blog.csdn.net/freewebsys/article/details/108971807未经博主... 查看详情

学生成绩管理后台第二项任务：初步建模，搭建一个简单的网站

...茹合伙人：李玉婷签约员工：闫玉荣前言：学生成绩管理后台，看起来是一个简单的项目，但是对于我们今后的发展很重要，建设一个管理后台有很多方法，这里我们主要使用Rstudio，在之后的文章中，会详细给出我们小组完成... 查看详情

如何使用laravel搭建后台登录系统

首先确认，后台的用户表，设计表叫做badmin，每个管理员有用户名（username），有昵称（nickname），有邮箱（email），有密码（password）这里玩个花，使用laravel的migration来建立表（实际上可以用不着使用这个工具建立表）1安装好... 查看详情