从单独的输入标签上载文件

时间:2019-01-06 21:07:09

标签: angular

我正在尝试将2个单独的文件上传到我的Flask后端服务器,我想使用那里的密钥分别获取每个文件。

我在append方法中使用过的

会将它们添加到FormData对象中

<input type="file" name="wits" (change)="onFileSelected1($event)">
    <button type="button" (click)="onUpload1()">Upload</button>

    <input style="margin-top:2%;" type="file" name="zip" (change)="onFileSelected2($event)">
    <button type="button" (click)="onUpload2()">Upload</button>

    export class ConverterComponent implements OnInit {

 private status= []

 selectedFile1: File =null;
 selectedFile2: File =null;


 private _url= 'http://localhost:5000/upload';


  constructor(private _sendWellinfoService: SendWellinfoService, private flashMessagesService: FlashMessagesService,private router:Router,private _http: HttpClient) {
    document.body.style.backgroundImage = "url('../../../assets/img/photo.jpeg')";
    document.body.style.backgroundPosition = "center center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundAttachment = "fixed";
    document.body.style.backgroundSize = "cover";
   }

  ngOnInit() {
  }

  onFileSelected1(event1)
  {
    this.selectedFile1 =<File> event1.target.files[0];

  }

  onFileSelected2(event2)
  {
    this.selectedFile2 =<File> event2.target.files[0];

  }


  onUpload1()
  {
    const fd = new FormData();
    fd.append('**key1**',this.selectedFile1, this.selectedFile1.name);
    this._http.post(this._url,fd).subscribe(res =>{
      console.log(res);

    });


  }

  onUpload2()
  {
    const fd = new FormData();
    fd.append('**key2**',this.selectedFile2, this.selectedFile2.name);
    this._http.post(this._url,fd).subscribe(res =>{
      console.log(res);

    }); 

  }



 file1 = request.files['**key1**']
 file2 = request.files['**key2**']

当我仅从一个输入上载一个文件和一个onUpload方法而Onselected方法对我有效时,我想分别使用file1和file2进行一些验证,但遇到关键错误

0 个答案:

没有答案