آپلود عکس در Angular

برای شما هم حتمن پیش آمده است بخواهید عکس یا فایلی را در سرور آپلود کنید.شما بسته به تکنولوژی ها و کتاب خانه های موجود میتوانید این کار را به سادگی انجام دهید. ما در این مثال از تکنولوژی جدید انگولار 4 استفاده خواهیم کرد و همچنین سرور ما Web Api خواهد بود.قبل از هر کاری به کانفبگ کلاینت خواهیم پرداخت ، پروژه ساده خود را ایجائ کنید درون پرروژه یک کامپوننت به نام Upload اینجاد کنید.برای اینجاد کامپوننت جدید میتوانید از دستور زیر استفاه کنید

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
ng generate component Upload

بعد از نصب کاپوننت شما باید شاهد ساختاری شبیه زیر باشید

برای شما هم حتمن پیش آمده است بخواهید عکس یا فایلی را  در سرور آپلود کنید.شما بسته به تکنولوژی ها و کتاب خانه های موجود میتوانید این کار را به سادگی انجام دهید. ما در این مثال از تکنولوژی جدید انگولار 4  استفاده خواهیم کرد و همچنین سرور ما Web Api خواهد بود.قبل از هر کاری به کانفبگ کلاینت خواهیم پرداخت ، پروژه ساده خود را ایجائ کنید برای اموزش ساخت و نصب پروژه انگولاری میتوانید |به این لینک::http://www.roxo.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C-%D9%86%D8%B5%D8%A8-%D8%A7%D9%86%DA%AF%D9%88%D9%84%D8%A7%D8%B1-4/| مراجعه کنید.درون پرروژه یک کامپوننت به نام Upload  اینجاد کنید.برای اینجاد کامپوننت جدید میتوانید از دستور زیر استفاه کنید
<text>
ng generate component Upload
<text>
بعد از نصب کاپوننت شما باید شاهد ساختاری شبیه زیر باشید||https://tosinso.com/files/get/b7e520ed-85fe-4df0-b3bd-a137445a9517||

وارد upload.component.html رفته و کد html  رفته و کد های زیر را در ان کپی کنید
<htm>
<p>
Upload Image
</p>
<input type=file name=ProfilePhoto id=ProfilePhoto (change)=readUrl($event) /> 
<img [src]=url>

<button (click)=FuncUpload()>Upload</button>
<htm>

وارد upload.component.ts رفته و  آن را به  صورت زیر کانفیگ کنید
<text>
import { Component, OnInit, ElementRef, Inject } from '@angular/core';
import { UploadService } from ./Upload.Service;

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css'],
  providers:[UploadService]
})
export class UploadComponent implements OnInit {
 url:string;
  elem:ElementRef;
  constructor(@Inject(ElementRef) elementRef: ElementRef,
  private UploadService: UploadService,)
   {  this.elem = elementRef; }

  ngOnInit() {
  }
  FuncUpload(){
 
  let files=this.elem.nativeElement.querySelector('#ProfilePhoto').files;
  let formData:FormData=new FormData();

  let file=files[0];
  formData.append('ProfilePhoto',file,file.name);         
   this.UploadService.uploadSystemUserProfilePhoto(null,formData).subscribe(data => {  
   }); 
}
readUrl(event) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
  
    reader.onload = (event:any) => {
      this.url = event.target.result;
    }
  
    reader.readAsDataURL(event.target.files[0]);
  }
  }
}

<text>
کلاس UploadComponent شامل سازنده که کار تزریق وابستگی ها را بر عهده دارد و دو تابع readUrl  و FuncUpload که تایع 
* FuncUpload :  فراخوانی سرویس برای اپلود کردن
* readUrl   : نمایش عکس انتخاب شده
اگه  دقت کنید  برنامه در قسمت  فراخوانی سرویس خطا دارد!!   وارد پوشه Upload شوید و یک فایل  به نام Upload.Service.ts ایجاد کنید و به صورت زیر کانفیگ کنید
<text>
import {Injectable} from @angular/core;
import {Http, Response, Headers, RequestOptions} from @angular/http;
import {Observable} from rxjs/Rx;
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw'
 
 
@Injectable()
export class UploadService {
    constructor(private http : Http) {
    }
    uploadSystemUserProfilePhoto(token:string,formData: FormData): Observable<any> {
        let options=this.getFileUploadHeader(token);                              
       return this.http.post('http://localhost:3615/user/PostUserImage', formData, options)
               .map((response: Response) => {
               
               });
}

       private getFileUploadHeader(token:string):RequestOptions{
        let headers = new Headers({ 
                'Data-Type': 'json',
                // 'Content-Type': false,
                // 'Process-Data':false,
                'Authorization':'Bearer '+token 
        });
        let options = new RequestOptions({ headers: headers });
        return  options;
}
   }
<text>
کلاس UploadService شامل دو تابع اصلی است
uploadSystemUserProfilePhoto : فراخوانی Web Api  میباشد
getFileUploadHeader :  اضافه کردن token  به هدر  برای  احراز هویت

قسمت کلاینت به طور کامل کانفیگ شده  حال به سمت سرور  میریم
یک پروژه Web Api   ساده ایجاد کنید و یک کنترل به اسم UploadController.cs ایجاد کنید درون ایم کلاس  اکشن زیر را   کپی کنید
<c#>
 [Route(user/PostUserImage)]
    [HttpPost]
    public HttpResponseMessage PostUserImage()
    {
        HttpResponseMessage response = new HttpResponseMessage();
        var httpRequest = HttpContext.Current.Request;
        if (httpRequest.Files.Count > 0)
        {
            foreach (string file in httpRequest.Files)
            {
                var postedFile = httpRequest.Files[file];
                var filePath = HttpContext.Current.Server.MapPath(~/UploadFile/ + postedFile.FileName);
                postedFile.SaveAs(filePath);
            }
        }
        return response;
    }
}  
<c#>

فقط کافیه به جای UploadFile  پوشه خود را بنویسید
امیدوارم  توانسته باشم کمکی کرده باشم

وارد upload.component.html رفته و کد html رفته و کد های زیر را در ان کپی کنید

<p>
Upload Image
</p>
<input type="file" name="ProfilePhoto" id="ProfilePhoto" (change)="readUrl($event)" /> 
<img [src]="url">

<button (click)="FuncUpload()">Upload</button>

وارد upload.component.ts رفته و آن را به صورت زیر کانفیگ کنید

import { Component, OnInit, ElementRef, Inject } from '@angular/core';
import { UploadService } from "./Upload.Service";

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css'],
  providers:[UploadService]
})
export class UploadComponent implements OnInit {
 url:string;
  elem:ElementRef;
  constructor(@Inject(ElementRef) elementRef: ElementRef,
  private UploadService: UploadService,)
   {  this.elem = elementRef; }

  ngOnInit() {
  }
  FuncUpload(){
 
  let files=this.elem.nativeElement.querySelector('#ProfilePhoto').files;
  let formData:FormData=new FormData();

  let file=files[0];
  formData.append('ProfilePhoto',file,file.name);         
   this.UploadService.uploadSystemUserProfilePhoto(null,formData).subscribe(data => {  
   }); 
}
readUrl(event) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
  
    reader.onload = (event:any) => {
      this.url = event.target.result;
    }
  
    reader.readAsDataURL(event.target.files[0]);
  }
  }
}

کلاس UploadComponent شامل سازنده که کار تزریق وابستگی ها را بر عهده دارد و دو تابع readUrl و FuncUpload که تایع

  • FuncUpload : فراخوانی سرویس برای اپلود کردن
  • readUrl : نمایش عکس انتخاب شده

اگه دقت کنید برنامه در قسمت فراخوانی سرویس خطا دارد!! وارد پوشه Upload شوید و یک فایل به نام Upload.Service.ts ایجاد کنید و به صورت زیر کانفیگ کنید

import {Injectable} from "@angular/core";
import {Http, Response, Headers, RequestOptions} from "@angular/http";
import {Observable} from "rxjs/Rx";
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw'
 
 
@Injectable()
export class UploadService {
    constructor(private http : Http) {
    }
    uploadSystemUserProfilePhoto(token:string,formData: FormData): Observable<any> {
        let options=this.getFileUploadHeader(token);                              
       return this.http.post('http://localhost:3615/user/PostUserImage', formData, options)
               .map((response: Response) => {
               
               });
}

       private getFileUploadHeader(token:string):RequestOptions{
        let headers = new Headers({ 
                'Data-Type': 'json',
                // 'Content-Type': false,
                // 'Process-Data':false,
                'Authorization':'Bearer '+token 
        });
        let options = new RequestOptions({ headers: headers });
        return  options;
}
   }

کلاس UploadService شامل دو تابع اصلی است

uploadSystemUserProfilePhoto : فراخوانی Web Api میباشد

getFileUploadHeader : اضافه کردن token به هدر برای احراز هویت

قسمت کلاینت به طور کامل کانفیگ شده حال به سمت سرور میریم

یک پروژه Web Api ساده ایجاد کنید و یک کنترل به اسم UploadController.cs ایجاد کنید درون ایم کلاس اکشن زیر را کپی کنید

 [Route("user/PostUserImage")]
    [HttpPost]
    public HttpResponseMessage PostUserImage()
    {
        HttpResponseMessage response = new HttpResponseMessage();
        var httpRequest = HttpContext.Current.Request;
        if (httpRequest.Files.Count > 0)
        {
            foreach (string file in httpRequest.Files)
            {
                var postedFile = httpRequest.Files[file];
                var filePath = HttpContext.Current.Server.MapPath("~/UploadFile/" + postedFile.FileName);
                postedFile.SaveAs(filePath);
            }
        }
        return response;
    }
}  

فقط کافیه به جای UploadFile پوشه خود را بنویسید

امیدوارم توانسته باشم کمکی کرده باشم


سبحان مظفری
سبحان مظفری

I am sobhan mozafari from Iram . I am working with Microsoft Technologies Like ASP.NET MVC , C# and SQL Server . I Interested in Node.js and Google Could computing and my favorite C++ .

نظرات