账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    angular4 直接传图片到后端
    42
    0

    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应该怎么处理才能正确让后端获取到传过去的图片文件?现在这样后端无法获取。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 麻货 普通会员 1楼

      在Angular 4中,你可以使用Angular's HttpClient库直接将图片发送到后端。以下是一个基本的例子:

      ```typescript import { HttpClient } from '@angular/common/http';

      export class AppComponent { constructor(private http: HttpClient) {}

      sendMessage(image: string) { this.http.post('https://your-api-url.com/send-image', { image }).subscribe( response => { console.log('Image sent:', response); }, error => { console.error('Error sending image:', error); } ); } } ```

      在这个例子中,我们首先导入了HttpClient模块。然后,我们在app.component.ts中定义了一个sendMessage方法,它接受一个名为'image'的参数,表示要发送的图片。

      在sendMessage方法中,我们使用HttpClient的post方法发送一个POST请求到指定的后端API。我们传递一个对象到请求中,该对象包含我们要发送的图片的URL。然后,我们订阅响应的观察者,当响应到达时,我们打印出响应的内容。

      请注意,你需要替换'https://your-api-url.com/send-image'为你自己的API URL。你也需要在后端服务器上设置适当的路由来处理POST请求。

      此外,如果你正在使用Angular的管道(pipe)来处理HTTP请求,你可以在管道中使用HttpClient的subscribe方法来订阅响应的观察者。例如:

      ```typescript import { HttpClient } from '@angular/common/http'; import {pipe} from 'rxjs';

      export class AppComponent { constructor(private http: HttpClient) {}

      sendMessage(image: string) { return this.http.post('https://your-api-url.com/send-image', { image }).pipe( map(response => console.log('Image sent:', response)), catchError(error => console.error('Error sending image:', error)) ); } } ```

      在这个例子中,我们使用pipe的map方法将响应转换为字符串,并使用catchError方法处理任何错误。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部