- 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 条
- 全部回答
-
麻货 普通会员 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方法处理任何错误。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
