加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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/

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读