web-dev-qa-db-ja.com

angular 5を使用してWebApi2に画像をアップロードする

いくつかのSOの質問と回答を見ましたが、問題を解決できませんでした。私のコードは次のようになります。

[〜＃〜] 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 [〜＃〜]

   [HttpPost]
    [ActionName("UploadDishImage")]
    public HttpResponseMessage UploadJsonFile()
    {
        HttpResponseMessage response = new HttpResponseMessage();
        var httpRequest = HttpContext.Current.Request;
        if (httpRequest.Files.Count > 0)
        {
            foreach (string file in httpRequest.Files)
            {
                var postedFile = httpRequest.Files[file];
                var filePath = HttpContext.Current.Server.MapPath("~/UploadFile/" + postedFile.FileName);
                postedFile.SaveAs(filePath);
            }
        }
        return response;
    }

リクエストがAPIにヒットすると、ファイル数は0になります。2日間かけて何が問題になっているのかを把握しましたが、問題を把握することもできませんでした。他の人にとっては機能しているので、コードに問題があるとは思いません。さまざまなSO受け入れられた回答からコードを取得しました。何がうまくいかなかったのかを誰かが理解するのを手伝ってくれませんか？

angularasp.net-web-api2form-data
6
Amir

FileUploadはAngularで非常に簡単です。この説明を使用するか ここ または私の手順に従うことができます。

コンポーネントテンプレートで、変更イベントを入力に添付し、アップロードするファイルを処理する関数を呼び出すようにします。 $ event.target.filesにはファイルが含まれます。

<input type="file" (change)="upload($event.target.files)">

コンポーネントクラスで、files.service.ts（またはこれまでに呼んだもの）をインポートし、関連モジュールまたはで提供する必要があります。再利用したくない場合は、コンポーネント自体。

import { FilesService } from 'PATHTO/files.service';
[...]
contructor(private filesService: FilesService) { }

次に、単一のファイルをアップロードするためにコンポーネントクラスに次の関数を実装できます。それ以外の場合は、files.itemを循環して、formDataに添付します。

upload(files: FileList) {
  const file = files.item(0);

  this.filesService.upload(file).subscribe(
    res => /* Place your success actions here */,
    error => /* Place your error actions here */
  );
}

ご使用の環境でurl属性が定義されていることを確認するか、投稿URLを静的なものに置き換えてください。たとえば、files.service.tsは次のようになります。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { environment } from 'PATHTO/environments/environment';

@Injectable()
export class FilesService {

  constructor(private http: HttpClient) { }

  upload(file: File): Observable<Object> {
    const formData: FormData = new FormData();
    formData.append('avatar', file, file.name);

    return this.http.post(`${environment.url}avatar.php`, formData);
  }
}

たとえば、phpサーバー側では、$ _ FILES変数を使用してこれらのファイルをキャッチできます。 Asp.netについてはよくわかりませんが、同等性が必要だと思います。

これがお役に立てば幸いです。良い一日を！乾杯。

2
Felix Lemke

このようにして、プロジェクトのWebAPIへのアップロード画像を実装します。

私は誰のために懸念を共有します。

    const formData: FormData = new FormData();
    formData.append('Image', image, image.name);
    formData.append('ComponentId', componentId);
    return this.http.post('/api/dashboard/UploadImage', formData);

ステップバイステップ

[HttpPost]
[Route("api/dashboard/UploadImage")]
public HttpResponseMessage UploadImage()
        {
            string imageName = null;
            var httpRequest = HttpContext.Current.Request;
            //Upload Image
            var postedFile = httpRequest.Files["Image"];
            //Create custom filename
            if (postedFile != null)
            {
                imageName = new String(Path.GetFileNameWithoutExtension(postedFile.FileName).Take(10).ToArray()).Replace(" ", "-");
                imageName = imageName + DateTime.Now.ToString("yymmssfff") + Path.GetExtension(postedFile.FileName);
                var filePath = HttpContext.Current.Server.MapPath("~/Images/" + imageName);
                postedFile.SaveAs(filePath);
            }
}

HTMLフォーム

<form #imageForm=ngForm (ngSubmit)="OnSubmit(Image)">

                    <img [src]="imageUrl" class="imgArea">
                    <div class="image-upload">
                        <label for="file-input">
                            <img src="upload.jpg" />
                        </label>

                        <input id="file-input" #Image type="file" (change)="handleFileInput($event.target.files)"/>
                        <button type="submit" class="btn-large btn-submit" [disabled]="Image.value=='' || !imageForm.valid"><i class="material-icons">save</i></button>
                    </div>
                </form>

APIを使用するTSファイル

OnSubmit(Image) {
    this.dashboardService.uploadImage(this.componentId, this.fileToUpload).subscribe(
      data => {
        console.log('done');
        Image.value = null;
        this.imageUrl = "/assets/img/logo.png";
      }
    );
  }

サービスTS

uploadImage(componentId, image) {
        const formData: FormData = new FormData();
        formData.append('Image', image, image.name);
        formData.append('ComponentId', componentId);
        return this.http.post('/api/dashboard/UploadImage', formData);
    }
2
Hien Nguyen