这篇文章将为大家详细讲解有关ionic4+angular7+cordova如何实现上传图片功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联-专业网站定制、快速模板网站建设、高性价比温岭网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式温岭网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖温岭地区。费用合理售后完善，十多年实体公司更值得信赖。
前言
ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件，而cordova插件的更新或者移动平台的更新很可能导致插件的不可用，维护升级成本较高。
安装插件
安装插件Image Picker
$ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @ionic-native/image-picker
安装插件File Transfer
$ ionic cordova plugin add cordova-plugin-file-transfer $ npm install @ionic-native/file-transfer
添加到app.module.ts
import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { FileTransfer} from '@ionic-native/file-transfer/ngx';
html添加控件
编辑ts文件
export class UploadPage {
constructor(
private imagePicker: ImagePicker,
private transfer: FileTransfer
) {
}
// 选择图片，选择完成立即上传
chooseImage() {
const options = {
maximumImagesCount: 1
// width: int,
// height: int,
// quality: int (0-100),
// outputType: int
};
this.imagePicker.getPictures(options).then((results) => {
for (const res of results) {
this.upload(res);
}
}, (err) => {
});
}
// 上传文件
upload(file) {
const fileTransfer: FileTransferObject = this.transfer.create();
const options: FileUploadOptions = {
fileKey: 'file',
fileName: timestamp() + '.jpg',
params: {
type: 'file',
action: 'upload',
timestamp: timestamp(),
auth_token: '79e1bd1504962034c068461d58b9cd89a1d8a4a1'
},
headers: {}
};
fileTransfer.upload(file, 'https://imgbb.com', options)
.then((data) => {
alert('success');
})
.catch((e) => {
});
}
}最终效果
关于“ionic4+angular7+cordova如何实现上传图片功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
