如何使用 ionic angular.js 上传带有表单数据的图像答案

【问题标题】：how to upload image with form data with ionic angular.js如何使用 ionic angular.js 上传带有表单数据的图像
【发布时间】：2016-09-05 17:12:03
【问题描述】：

您好，我正在尝试为我的移动应用程序上传带有 ionic angular.js 中其余表单数据的图像。我正在使用 ngCordova 插件。但没有找到该过程的任何文件。

示例：我在此表格中有注册表，必须输入他的详细信息并上传个人资料图片。但作为示例，我无法在一个请求中将所有数据发送到服务器。

谢谢

【问题讨论】：

标签： angularjs ionic-framework image-uploading ngcordova image-upload

【解决方案1】：

尝试为此使用 $cordovaFileTransfer。具体实现描述在这里：Upload image to server angularjs

您可以从本地存储上传图像或使用相机插件拍摄的图像。

【讨论】：

【解决方案2】：

要使用 Ionic 2 框架将图像上传到服务器，您必须使用 Transfer 插件。使用安装传输插件

ionic plugin add cordova-plugin-file-transfer npm install --save @ionic-native/transfer

然后调用 Transfer 类的上传函数。

const fileTransfer: TransferObject = this.transfer.create();

  let options1: FileUploadOptions = {
     fileKey: 'file',
     fileName: 'name.jpg',
     headers: {}

  }

 fileTransfer.upload(imageDataLocalURL, 'http://localhost/ionic/upload.php',  options1)
.then((data) => {
 // success
 alert("success");
}, (err) => {
 // error
 alert("error"+JSON.stringify(err));
});

2018 年 2 月 26 日更新

对于 Ionic 3，文件传输插件有一些变化。

安装文件传输插件

ionic cordova plugin add cordova-plugin-file-transfer npm install --save @ionic-native/file-transfer

并且类在 Ionic 版本 3 中从 Transfer 重命名为 FileTransfer。

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

如需完整演示，请访问以下链接。

https://ampersandacademy.com/tutorials/ionic-framework-3/upload-image-to-the-php-server-using-ionic-3-file-transfer-and-camera-plugin

【讨论】：