ionic html5 上传图片,ionic3不用插件用(html5)做的上传

page页面:

这个是看到的要上传的图片

upload.png

page css:

/*蓝色按钮,绝对定位*/

.blueButton {

position: absolute;

display: block;

width: 100px;

height: 40px;

text-decoration: none;

text-align: center;

font: normal normal normal 16px/40px 'Microsoft YaHei';

cursor: pointer;

border-radius: 4px;

}

/*自定义上传,位置大小都和a完全一样,而且完全透明*/

.myFileUpload {

position: absolute;

display: block;

width: 100px;

height: 40px;

opacity: 0;

}

page ts:

//选择图片

fileupload(event, type) {

let that = this;

let files = event.target.files;

if (files && files.length > 0) {

let file = files[0];

that.uploadFileWithServe(file, type);

}

}

async uploadFileWithServe(image, type) {

let loader = this.loadingCtrl.create({

content: "上传中..."

});

loader.present();

try {

let Imgresult: any;

Imgresult = await this.http.uploadFile("headimage", image, null);

loader.dismiss();

} catch (error) {

this.util.showToast(error.msg);

loader.dismiss();

}

}

/**

* 上传文件

* @param path 传到那个目录下

* @param file 文件

* @param type 类型 视频传到video ,图片传到files

*/

uploadFile(path, file, type): Promise {

return new Promise(async (resolve, reject) => {

try {

let userInfo = this.storage.get('user');

let form = new FormData();

let url: any;

if (Boolean(type)) {

url = APP_SERVE_URL + "files/" + type; //服务器上传地址

} else {

url = APP_SERVE_URL + "files"; //服务器上传地址

}

form.append('file', file);

let xhr = new XMLHttpRequest();

xhr.open("post", url, true);

xhr.setRequestHeader('path', path);

xhr.setRequestHeader('email', userInfo.email);

xhr.setRequestHeader('token', userInfo.token);

//上传进度事件

// xhr.upload.addEventListener("progress", function (result) {

// if (result.lengthComputable) {

// //上传进度

// var percent = (result.loaded / result.total * 100).toFixed(2);

// console.log(percent);

// }

// }, false);

xhr.addEventListener("readystatechange", function () {

var result = xhr;

if (result.status != 200) { //error

reject(result);

}

else if (result.readyState == 4) { //finished

resolve(JSON.parse(result.response));

}

});

xhr.send(form); //开始上传

} catch (error) {

reject(error);

}

});

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值