ANGULAR4 Background Management System Building (10)-a generic component that can upload files across domains

Write very slowly, unconsciously this is the tenth article. But I have so many other things that I can only write. Now ANGULAR4 or angular2 popular way to upload is ng2-file-upload. It has a very powerful function. But I'm not configured to be able to upload across domains. It seems that cross-domain uploads are not supported, and you do not know the right or wrong. jquery's plug-in jquery File Upload can be uploaded across domains. But you want to use the jquery plugin within ANGULAR4. The global jquery object needs to be found. is also very troublesome. So here you can implement a cross-domain upload function.

The overall design of the demo has three sites, the first is a purely front-desk, providing html,js, a variety of resources for Web Access support can be. Iis,apache,nginx can be used to support. The second is a pure backend to provide RESTful interface services, where Tomcat is used. The third is a resource site. Provide access to various files uploaded by users and can be used Iis,apache,nginx. Here the detailed URLs of the three sites are:

① Front desk http://114.215.44.2

② Backstage http://114.215.44.2:8080

③ Resource Site http://114.215.44.2:83

The process of uploading pictures is to upload files at the foreground site and pass them to the backend site interface. The background site writes the files to the resource site. Picture uploads within frames can be mixed with form uploads. is to pass the upload file and form data in a post or put. However, the upload function is associated with a specific business. The versatility we need is lost. So my idea is that the parent class component has a text box followed by a button. Click the button to eject the sub-component in a small window. Upload files within a small window. The remote file path is then returned to the parent component, which is passed to the text box. Two examples are made. One is when you add or modify user information. Select a picture of your avatar.

There is also a special to show the upload operation demo

The HTML code of the upload file component is simple, and there is no preview function. In the future expand it.

<template #templateUploadFile >  <div class= "Modal-header" style= "background: #EAEAEA;" >    
The corresponding background code is as follows
1Import {Component, OnInit, Input, Inject, Viewchild, Templateref, Elementref, Output, Eventemitter} from '@angular/core';2Import {Bsmodalservice} from 'Ngx-bootstrap/modal';3Import {Bsmodalref} from 'Ngx-bootstrap/modal/modal-options.class';4 5Import {fileuploader, fileuploaderoptions} from 'Ng2-file-upload';6Import Constantslist from '.. /.. /common/constants/config';7Import {Backcode} from '.. /.. /module/common/common';8Import {Usernews} from '.. /.. /module/business/login';9 Ten @Component ({ OneSelector'App-uploadfile', ATemplateurl:'./uploadfile.component.html', -Styleurls: ['./uploadfile.component.css'] - }) theExportclassUploadfilecomponent implements OnInit { -  -@ViewChild ('Templateuploadfile') PublicTemplate:templateref<any>; - Modalref:bsmodalref; +Modalconfig = {animated:false, keyboard:false, backdrop:true, Ignorebackdropclick:true, }; -@Input () Publicusernews:usernews; +@Output () weburl:eventemitter<string> =Neweventemitter<string>(); AIserror:boolean =false; atStringerror:string; -  -ConstructorPrivateModalservice:bsmodalservice, @Inject ('Public_service')PrivatePublicservice:any) { } -  - Ngoninit () {} -  inOpenmodal (template:templateref<any>) { -      This. Modalref = This. modalservice.show (Template, Object.assign ({}, This. Modalconfig, {class:'MODAL-SM' })); to   } +  - Closemodal () { the      This. Modalref.hide (); *      This. Modalref =NULL; $      This. Stringerror ="';Panax Notoginseng      This. IsError =false; -   } the  +    PublicShow () { A      This. Openmodal ( This. template); the      This. Stringerror ="'; +      This. IsError =false; -   } $  $Onselectchange (Event: Eventtarget) { -Let Eventobj:msinputmethodcontext = <MSInputMethodContext>Event; -Let target:htmlinputelement = <HTMLInputElement>Eventobj.target; theLet files:filelist =Target.files; -Let File:file = files[0];Wuyi      the     if( This. Checkisimage (file.name) = =true) { -        This. IsError =false; Wu        This. Stringerror ="'; -Let PostData =NULL; AboutLet Sendtoken:string= This. Usernews.id +'-'+ This. Usernews.token +'-'+Constantslist.runid; $  -        This. Publicservice.postwithfile1 (Sendtoken, PostData, files). Then (UB = { -Let Bc:backcode = UB asBackcode; -          This. Weburl.emit (Constantslist.hostpic +bc.id); A       }); +     }  the     Else{ -        This. IsError =true; $        This. Stringerror ='make sure the file format is JPG png jpeg bmp gif'; the     } the   } the  theCheckisimage (filename:string): boolean { -Let Filenameend:string='|'+ Filename.slice (Filename.lastindexof ('.') +1) +'|'; in     if('|jpg|png|jpeg|bmp|gif|'. IndexOf (Filenameend.tolowercase ())!==-1) { the       return true; the}Else { About       return false; the     } the   } the  +}
View Code
Within the service-side SSM framework, the key to receiving post is to add the following information.
  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");
Other receive files. There are many examples of writing files online. This is verified with custom HTTP header information. Prevent illegal post upload files on other paths. But it's not absolute. This feature is shown here.
Demo Demo address is http://114.215.44.2
ANGULAR4 Background Management System Building (10)-a generic component that can upload files across domains