我们要实现图片上传到服务器使用的是cordova的上传插件file-transfer
插件官方地址：https://ionicframework.com/docs/native/file-transfer/
1、插件及模块安装
ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer
如果以上命令安装不成功可以使用下面的命令：
ionic cordova plugin add cordova-plugin-file npm install --save @ionic-native/file ionic cordova plugin add cordova-plugin-file-transfer npm install --save @ionic-native/file-transfer
2、在app.modules.ts中引用以及在providers中注册
import { File } from '@ionic-native/file';
import { FileTransfer} from '@ionic-native/file-transfer';3、在使用到的页面引入
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
constructor(private transfer: FileTransfer, private file: File) { }
...
const fileTransfer: FileTransferObject = this.transfer.create();
// Upload a file:
fileTransfer.upload(..).then(..).catch(..);
// Download a file:
fileTransfer.download(..).then(..).catch(..);
// Abort active transfer:
fileTransfer.abort();
// full example
upload() {
let options: FileUploadOptions = {
fileKey: 'file',
fileName: 'name.jpg',
headers: {}
.....
}
fileTransfer.upload('<file path>', '<api endpoint>', options)
.then((data) => {
// success
}, (err) => {
// error
})
}
*
download() {
const url = 'http://www.example.com/file.pdf';
fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}例子：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,private camera: Camera,private transfer: FileTransfer, private file: File) {
}
doCameraUpload(){
const options: CameraOptions = {
quality: 100, //图片质量
destinationType: this.camera.DestinationType.FILE_URI, /*返回的类型*/
encodingType: this.camera.EncodingType.JPEG,
sourceType:this.camera.PictureSourceType.CAMERA,
// mediaType: this.camera.MediaType.PICTURE,
allowEdit:true,
targetWidth:300, /*宽度高度要设置*/
targetHeight:300
}
this.camera.getPicture(options).then((imageData) => {
alert(imageData);
this.doUpload(imageData); /*注意this指向*/
}, (err) => {
// Handle error
});
}
//上传图片
doUpload(filePath){
const fileTransfer: FileTransferObject = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'file', //input type=file
fileName: 'xxx.jpg', //上传的图片名字
mimeType:'image/jpeg', /*上传的图片类型*/
params:{ /*给服务器post的数据*/
name:'张三',
age:20
},
headers: {}
}
var api='http://localhost/imgupload';
fileTransfer.upload(filePath, api, options)
.then((data) => {
// success
alert(JSON.stringify(data));
}, (err) => {
// error
alert('error');
alert(JSON.stringify(err));
})
}
} form.parse(req, function(err, fields, files) {
console.log(files); //文件
console.log(fields); //post数据
var path="/"+files.file[0].path;
res.json({"success":"true","path":path}) /*给编辑器返回地址信息*/
});C#服务器端 以二进制数据接收数据
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string imgdata = context.Request.Params["imgdata"];
string dummyData = imgdata.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
if (dummyData.Length % 4 > 0)
{
dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
}
//string a = HttpUtility.UrlDecode(dummyData);
//String inputStr = a;
byte[] arr = Convert.FromBase64String(dummyData);
double imgdaxiao=(arr.Length / 1024);
string newFileName = GetRamCode() + "." + "jpg"; //随机生成新的文件名
string newThumbnailFileName = "thumb_" + newFileName; //随机生成缩略图文件名
string upLoadPath = GetUpLoadPath(); //本地上传目录相对路径
string fullUpLoadPath = GetMapPath(upLoadPath); //本地上传目录的物理路径
string newFilePath = upLoadPath + newFileName; //本地上传后的路径
//检查本地上传的物理路径是否存在，不存在则创建
string newThumbnailPath = upLoadPath + newThumbnailFileName; //上传后的缩略图路径
if (!Directory.Exists(fullUpLoadPath))
{
Directory.CreateDirectory(fullUpLoadPath);
}
SaveFile(arr, fullUpLoadPath + newFileName);
Image img = Image.FromFile(fullUpLoadPath + newFileName);
int a = img.Width;
int b = img.Height;
suolvtu(fullUpLoadPath + newFileName, fullUpLoadPath+ newThumbnailFileName);
context.Response.Write(JsonHelper.ObjectToJSON(new { yuantu = newFilePath, suoluetu = newThumbnailPath,daxiao= imgdaxiao,kuan=a,gao=b }));
}以文件方式接收数据 直接用cms中的upload