xxx.html.ts代码
<img [src]="user.userimg" alt="" (click)="getPicturesFromPhoto()">
xxx.page.ts代码
import { Component, OnInit } from '@angular/core';
import axios from 'axios'
import { ImagePicker } from '@ionic-native/image-picker/ngx';
@Component({
selector: 'app-me',
templateUrl: './me.page.html',
styleUrls: ['./me.page.scss'],
})
export class MePage implements OnInit {
public blob:any
public file:any
constructor(private imagePicker: ImagePicker) {
getPicturesFromPhoto() {
let options = {
maximumImagesCount: 1,
width: 200,
height: 200,
quality: 100,
outputType: 1, //设置为0是文件路径,1是base64,关于如何把base64转化为文件,请看下面的链接
}
this.imagePicker.getPictures(options).then((results) => {
for (let res of results) {
this.blob = this.dataURLtoBlob("data:image/jpeg;base64," + res) //这里一定要加上data:image/jpeg;base64,
this.file = this.blobToFile(this.blob, 'a.png') //这里一定要加上文件的名字,看你自己的后台设置
let param = new FormData() //以表单的形式上传,这里一定要这样才能传过去
param.append('file', this.file,this.file.name)
alert(param)
this.sendChangeImg(param)
}
}, (err) => {
});
}
sendChangeImg(param) {
let config = {
headers: {
'Content-Type': 'multipart/form-data', //这里一定要设置
token: window.localStorage.getItem('token')
}
}
axios.post('http://www.chenweisheng.com/FCS/user/changePortrait', param, config)
.then(res => {
alert('返回信息' + res.data.data.info)
}).catch(error => {
})
}
//将base64转换为blob
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
//将blob转换为file
blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
ngOnInit() {
}
}
参考文章:base64转文件https://blog.csdn.net/baidu_41921865/article/details/90665084