为了账号安全,请及时绑定邮箱和手机立即绑定

angular4 直接传图片到后端

angular4 直接传图片到后端

PHP
30秒到达战场 2019-03-14 14:53:11
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应该怎么处理才能正确让后端获取到传过去的图片文件?现在这样后端无法获取。
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 433 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信