Angular 2 – 如何上传文件并存储在本地文件夹中
发布时间:2020-12-17 17:00:11 所属栏目:安全 来源:网络整理
导读:例如,我在src文件夹下创建了一个名为“upload”的文件夹. html文件: div input type="file" id="photo" (change)="onChange($event)" //divdiv class="col-md-6 mb-4 mt-3" button (click)="upload()" class="btn btn-primary w-100"Upload Picture/button/
例如,我在src文件夹下创建了一个名为“upload”的文件夹.
html文件: <div> <input type="file" id="photo" (change)="onChange($event)" /> </div> <div class="col-md-6 mb-4 mt-3"> <button (click)="upload()" class="btn btn-primary w-100">Upload Picture</button> </div> upload-modal.component.ts文件 import { Http,Response } from '@angular/http'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import "rxjs/add/operator/do"; import "rxjs/add/operator/map"; const uploadURL = '/upload'; @Component({ selector: 'upload-modal',templateUrl: './upload-modal.component.html',styleUrls: ['./upload-modal.component.css'] }) export class UploadModalComponent { displayMessage: string = ''; constructor(public activeModal: NgbActiveModal,private http: Http,private el: ElementRef) { } setDisplayMessage(msg: string) { this.displayMessage = msg; } upload() { this.activeModal.dismiss('Cross click'); } onChange(event) { let inputEl: HTMLInputElement = this.el.nativeElement.querySelector('#photo'); let fileCount: number = inputEl.files.length; let formData = new FormData(); if (fileCount > 0) { // a file was selected formData.append('photo',inputEl.files.item(0)); this.http .post(uploadURL,formData).map((res: Response) => res.json()).subscribe( // map the success function and alert the response (success) => { alert("success"); },(error) => alert("error")); } } } 当我点击上传按钮,我在控制台日志中发现此错误= http://localhost:3000/upload 404(未找到) 解决方法
希望这会有所帮助:完整的代码.
你需要运行这个cmd:npm i ng2-file-upload –save 代码:https://github.com/valor-software/ng2-file-upload 演示:http://valor-software.com/ng2-file-upload/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |