angular4 直接传图片到后端

angular4传图片到后端,后端语言为php

html:

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

图像读取:

  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);
      });
  }

问题:请问交互部分的file应该怎么处理才能正确让后端获取到传过去的图片文件?现在这样后端无法获取。

30秒到达战场
浏览 434回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP