鍍金池/ 問答/HTML5  PHP  HTML/ angular4 直接傳圖片到后端

angular4 直接傳圖片到后端

angular4傳圖片到后端,后端語言為php

html:

<input type="file" name="file" accept="image/*" multiple (change)="editUserImg($event)"/>

圖像讀?。?/p>

  getReader(resolve, reject) {
    let reader = new FileReader();
    reader.onload = this.Onload(reader, resolve);
    reader.onerror = this.OnError(reader, reject);
    return reader;
  }
  readAsDataUrl(file){
    let that = this;
    return new Promise(function(resolve,reject){
      let reader = that.getReader(resolve, reject);
      reader.readAsDataURL(file);
    })
  }
  Onload(reader: FileReader, resolve) {
    return () => {
      resolve(reader.result);
    }
  }
  OnError(reader: FileReader, reject) {
    return () => {
      reject(reader.result);
    }
  }

交互部分:

  editUserImg(event) {
    if(!event.target.files[0]) {
      return;
    }
    this.appService.readAsDataUrl(event.target.files[0]).then(result => {
      let file = event.target.files[0];
      this.user_img = result;

      let fd = new FormData();
      fd.append('file', file);

      this.appService.httpPost( AppGlobal.API.getSaveUserInfo,
        { type: 1, person_img: fd, token: "123456" },
        rs => {
          console.log("edit user img:", rs);

          if (rs.re === "1"){
            this.appService.toast("修改成功", () => {
              this.getUserInfo();
            });
          } else {
            this.appService.toast(rs.info);
          }
        });
    });
  }

封裝的post方法:

  toQueryString(obj) {
    let result = [];
    for (let key in obj) {
      key = encodeURIComponent(key);
      let values = obj[key];
      if (values && values.constructor == Array) {
        let queryValues = [];
        for (let i = 0, len = values.length, value; i < len; i++) {
          value = values[i];
          queryValues.push(this.toQueryPair(key, value));
        }
        result = result.concat(queryValues);
      } else {
        result.push(this.toQueryPair(key, values));
      }
    }
    return result.join('&');
  }
  toQueryPair(key, value) {
    if (typeof value == 'undefined') {
      return key;
    }
    return key + '=' + encodeURIComponent(value === null ? '' : String(value));
  }


//  post
//  ------------------------------------------------------
  httpPost(url, params, callback, loader:boolean = false){

    let headers = new Headers({
      'Content-Type': 'application/x-www-form-urlencoded',
    });

    let options = new RequestOptions({
      headers: headers,
    });

    let loading = this.loadingCtrl.create();
    if (loader) {
      loading.present();
    }
    this.http.post(AppGlobal.domain + url, this.toQueryString(params), options)
      .toPromise()
      .then(res => {
        let d = res.json();
        if (loader) {
          loading.dismiss();
        }
        callback(d == null ? "[]" : d);
      })
      .catch(error => {
        if (loader) {
          loading.dismiss();
        }
        this.handleError(error);
      });
  }

問題:請(qǐng)問交互部分的file應(yīng)該怎么處理才能正確讓后端獲取到傳過去的圖片文件?現(xiàn)在這樣后端無法獲取。

回答
編輯回答
愛是癌

給你一個(gè)輪子:Element-angular。
他們的做法是:

 upload(path: string, file: File): Observable<any> {
    const req: HttpRequest<{}> = new HttpRequest('POST', path, file, {
      headers: this.headers,
      reportProgress: true,
      withCredentials: this.withCredentials,
    })
    return this.http.request(req)
  }

直接傳文件,并未做過多的處理。

2018年8月9日 17:19