相关疑难解决方法(0)

如何选择多个文件<input type="file">？

我正在使用Angular 5.我有一个要求,我需要在页面上传图像并显示图像？

是否有任何Angular 5标签或html标签我能做到这一点？

我正在附上一个屏幕截图.用户点击"上传"按钮,应该有一个弹出窗口,用户选择要上传的文件.选择要上传的文件后,单击"打开"按钮.图像将显示在页面上？

任何提示或建议将不胜感激!!

我看了几个问题和答案,但无法解决我的问题.我的代码如下:

HTML

 <input type="file" id="file" accept="image/*" name="File" (change)="handleFileInput($event.target.files)">
 <button type="button" mat-raised-button color="primary" (click)="uploadFileToActivity()">Upload</button>

零件

  handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
  }

  uploadFileToActivity() {

    this._dishAddService.postFile(this.fileToUpload).subscribe(data => {

      }, error => {
        console.log(error);
      });
  }

服务

 postFile(fileToUpload: File): Observable<boolean> {
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    let headers = new Headers({ 'Content-Type': 'application/json' });    
    headers.append('Content-Type', 'multipart/form-data');

    let options = new RequestOptions({ headers: headers, method: 'post' });
    return this.http.post(this.httpRequestUrl + 'api/dish/UploadDishImage', formData, options)
      .map(
        (response => response.json()))
      .catch(CommonFunctionService.handleError);
  }

API …

我是 Angular 6 的新手。我知道这可能很愚蠢，但我没有得到任何解决方案。单击文本字段中的浏览图像时，我想打开文件对话框。这是我尝试过的。

<div class="boxed">
  <div class="input-group">
      <input id="spFile" class="form-control" name="spFile">
    <img src="../../../../../assets/images/maps/Browse.png" type= "file" width="40" height="40" style=" position: absolute; top: 1px; right: 1px" aria-hidden="true"/>
  </div>
</div>

我怎样才能让这个轻松打开一个文件对话框？

我正在尝试使用以下方法从用户加载JSON文件：

<input
  style="display: none"
  type="file" (change)="onFileChanged($event)"
  #fileInput>
<button (click)="fileInput.click()">Select File</button>
<button (click)="onUpload()">Upload!</button>

这是组件ts文件中的代码：

export class MyFileUploadComponent {
  selectedFile: File

  onFileChanged(event) {
    this.selectedFile = event.target.files[0];
    console.log(this.selectedFile);
    console.log('content: ' + JSON.stringify(this.selectedFile));
  }

  onUpload() {
  // upload code goes here
  }
}

该行console.log(this.selectedFile);的确为我提供了文件元数据，即：

lastModified: 1551625969247
lastModifiedDate: Sun Mar 03 2019 17:12:49 GMT+0200 (Israel Standard Time) {}
name: "manuscripts.json"
size: 6008
type: "application/json"
webkitRelativePath: ""
__proto__: File

但是，当我尝试使用它JSON.stringify获取内容时，会得到：（{}空文件）。

是什么原因

谢谢。

对于我的 Angular + Nodejs 应用程序，我有以下上传图像：

文件.ts

 handleFileInput(files: FileList) {
    var filename = files.item(0);
    this.upload(filename).subscribe();
};


upload(fileToUpload: File){   
  console.log(fileToUpload); //Here I can see all the image data     

  let obj = {
        imageData: fileToUpload,
        imageID: "Sample"
  };

  return this.http.post<any>(url, obj ,{});
}

然后在nodejs中，uploadController.js

private initAPI(): void {
    this.router.route('/file')
        .post((req, res) => {
            console.log(req);   //No "body" data             
       });
}

当我获取数据时，我可以看到以下内容：

body:
   imageData: Object {}
   imageID: "Sample"

是imageData空的。关于如何发送图像有什么建议吗？

谢谢。