Question

您好我的问题是文件上传..

我的应用程序前端是Angular 4，后端是Laravel ......

我没有添加第三方库来上传文件。

问题是我只能使用以下代码上传.txt文件，但它不适用于pdf, image, xls, docx。（需要上传所有类型的文件）

我使用以下代码上传文件。

HTML CODE ::

 <div class="form-group">
  <label for="files">File Selection::</label>
  <input type="file" id="avatar" (change)="onFileChange($event)" #fileInput multiple><br>
  <button type="button" class="btn btn-sm btn-default" (click)="clearFile()">clear file</button>
  <br>
    </div>

COMPONENT.TS CODE ::

onFileChange(event) {
    debugger;
    console.log('filesevent###########', event);
    let reader = new FileReader();
    if (event.target.files && event.target.files.length > 0) {
      let file = event.target.files[0];
      // reader.readAsDataURL(file);
       reader.readAsText(file);                    //reader.result)

      reader.onload = () => {
        this.form.get('fileData').setValue({
          filename: file.name,
          filetype: file.type,
          value: reader.result,       //.split(',')[1]
        });
        console.log(typeof(reader.result));
        console.log('fileData#####', this.form.get('fileData').value);
        this.locService.sendFileData(this.form.get('fileData').value)
       .subscribe(success => console.log('msg@@@@@@@@', success));
      };
    }
  }

SERVICE.TS CODE ::

  sendFileData(data): Observable<any> { 
      return this.http.post(this.config.STORE_KEY + '/public/api/generic/image/add/' +
      this.userDetails.roleid, data).map((res: Response) => {
       res.json();
      }).catch(this.handleError);
    }

Answer 1

您需要发送 multipart / form-data 等文件。

Component.ts

onFileChange(event) {
 if (event.target.files && event.target.files.length > 0) {
  let file = event.target.files[0];
    this.locService.sendFileData(file)
   .subscribe(success => console.log('msg@@@@@@@@', success));
 };
}

Service.ts

sendFileData(file: File): Observable<FileResponseModel> {
  const url: string = Urls.uploadFiles();

  const formData: FormData = new FormData();
   formData.append('attachment', file, file.name);

  const options = {
   headers: new HttpHeaders().set('enctype', 'multipart/form-data')
  };

  return this.httpService.post(url, formData, options);
}

无法将所有类型的文件上传到服务器

1 个答案: