MUI关于头像上传和压缩示例
思路:通过h5+拍照或从手机选择图片,然后将图片压缩转成base64,通过post提交base64格式的图片字符串(这需要跟后台接口支持),上传成功之后,接口返回图片id,前端根据上传图片id,拼接img src下载图片展示。
项目用MUI开发app,界面如下:
现整理app头像上传和压缩代码示例:
1.部分html:
2.相关上传js:
//[头像]导航条点击事件处理
doc.querySelector('#headerPicSet').addEventListener('tap', function(e) {
//点击用户头像后,弹出actionSheet,选着从相册或是拍照;
if(mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "上传用户头像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按钮点击事件*/
switch(b.index) {
case 0:
break;
case 1: //拍照
getImage();
break;
case 2: //从手机相册选择
galleryImg();
break;
default:
break;
}
})
}
});
//拍照上传
function getImage() {
var c = plus.camera.getCamera(); //获取摄像头管理对象
c.captureImage(function(e) { //e为拍照成功的图片的路径
plus.io.resolveLocalFileSystemURL(e, function(entry) { //通过URL参数获取目录对象或文件对象
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
uploadHeadBase64(s);
}, function(e) {
console.log("读取拍照文件错误:" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.png"
})
}
//本地相册选择图片上传
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.copyTo(root, 'head.png', function(e) {
uploadHeadBase64(e.fullPath + "?version=" + new Date().getTime());
},
function(e) {
console.log('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHeadBase64(path);
},
function(e) {
console.log('copy image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误:" + e.message);
});
}, function(a) {}, {
filter: "image"
})
}
//上传头像图片 uploadHeadBase64 6/2
function uploadHeadBase64(imgPath) {
var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
console.log('上传baseIMG。。。')
console.log(imgData)
M.ajax({
type: 'post',
url: common.ajaxUrlPortal + '/front/cms/uploadImage/base64/head?Token=' + common.getToken(),
data: {
base64ImgData: imgData,
originalFilename:'head.jpeg'
},
dataType: 'json',
headers: {
Token: common.getToken()
},
success: function(data) {
console.log(typeof data);
console.log(JSON.stringify(data))
doc.getElementById('loginHeaderPic').src = common.ajaxUrlCms + '/image/download?id=' + data[0].id + '&fullPath=';
var page = plus.webview.getWebviewById('my_account_sub.html');
mui.fire(page, 'H_reload_getInfo', {});
},
error: function(xhr, type, errorThrown) {
M.toast('网络异常,请稍后再试!');
}
});
}
}
//将图片压缩转成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
if(width > height) {
if(width > 750) {
height = Math.round(height *= 750 / width);
width = 750;
}
} else {
if(height > 750) {
width = Math.round(width *= 750 / height);
height = 750;
}
}
canvas.width = width;
/*设置新的图片的宽度*/
canvas.height = height;
/*设置新的图片的长度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
/*绘图*/
var dataURL = canvas.toDataURL("image/jpeg", 0.3);
return dataURL.replace("data:image/jpeg;base64,", "");
}
==============================
下面是h5+上传图片:
//上传 5+ lhw 2017/4/7
function upload(imgPath) {
var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
// 控制文件上传尺寸,目前初定为5M
if(imgData.length > 5 * 1024 * 1024) {
M.toast('文件过大,请选择其他头像!');
return;
}
plus.nativeUI.showWaiting('正在上传...');
var task = plus.uploader.createUpload(common.ajaxUrlPortal + '/front/cms/uploadImage/head?Token='+common.getToken(), {
method: "POST"
},
function(t, status) { //上传完成
if(Number(status) === 200) {
console.info(JSON.stringify(t));
//alert(JSON.stringify(t));
//alert("上传成功:"+t.responseText);
var obj = JSON.parse(t.responseText);
// wt.close(); //关闭等待提示按钮
plus.nativeUI.closeWaiting();
doc.getElementById('loginHeaderPic').src = common.ajaxUrlCms + '/image/download?id=' + obj[0].id + '&fullPath=';
var page = plus.webview.getWebviewById('my_account_sub.html');
mui.fire(page, 'H_reload_getInfo', {});
} else {
//alert("上传失败:"+status);
M.toast('上传失败!');
//wt.close();//关闭等待提示按钮
plus.nativeUI.closeWaiting();
}
}
);
//添加其他参数
task.addData("name", "pic");
task.addFile(imgPath, {
file: "pic"
});
task.start();
};
}
贴图postman测试图片上传接口:
转载于:https://my.oschina.net/hgwn/blog/913318
MUI关于头像上传和压缩示例相关推荐
- mui ajax 文件上传,MUI的图片上传和压缩
MUI的上传图片目前知道有两种方式,一种见前面文章中关于图片裁切时使用的base64作为字符串上传,另外一种则是本篇章中所使用的plus.uploader方式,它是一种真正意义上的文件上传,我们可以使 ...
- 若依前后端分离版源码分析-前端头像上传后传递到后台以及在服务器上存储和数据库存储设计
场景 使用若依前后端分离版本时,分析其头像上传机制. 可作为续参考学习. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获 ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer 链接:https://zhuanlan.zhihu.com/p/24465742 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙 ...
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
- 调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
- 前端头像上传功能实现之普通图片/头像上传 详细解析1【扩展知识FormData对象】
上传的图片/头像有两种方案上传 第一种我们不对图片做处理直接上传到服务器端,把图片上传到服务器的img文件夹当中,然后我们把图片的地址信息存储在数据库当中,用图片的时候我们直接调用地址 第二种方案是我 ...
- Android头像上传--图片转base64,后台接收到的总是null问题
图片转base64,后台接到为null问题 项目中,在使用头像上传的时候,将图片转为base64,后台总是收到的base64字符串是null.原以为是图片未压缩,导致图片过大,超过了Tomcat配置的 ...
- vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件,用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
- Android 头像上传的实现
当我们点击头像想要进行头像上传时,我们可以给上传头像设置一个弹框效果,用来给用户提供相册选择和拍照两种选择. 这时我们可以使用PopupWindow实现 1. 定义图片存储位置 public void ...
最新文章
- 触发器与存储过程笔记
- es统计有多少个分组_es多字段分组去重统计
- 仰视源代码,实现strcpy
- 架构师养成之道-02-jvm原理
- CodeForces - 1220B Multiplication Table(思维)
- HOOK学习笔记与心得
- python安装email模块,python 3.4.0电子邮件包安装:ImportError:没有名为'cStringIO'的模块...
- php 微信扫码给红包,关于现金红包的详细介绍
- 阿里AI两项技术刷新行业纪录,为城市大脑,OR也为无人车?
- 十七 、二叉树的概念
- linux之SQL语句简明教程---CONCATENATE
- Viso各版本网盘免费下载
- JS同步执行延时函数的实现
- 用matlab画旋转抛物面_MAELAB (1)画出旋转抛物面z=x^2 y^2 编程(2)matlab 画出锥面z=(x^2+y^2)^(1/2)编程...
- 管理员界面html,12套超酷的后台管理员界面网站模板
- jinja2说明文档
- es进行curl请求时报错:missing authentication token for REST request
- feedburner怎么用_FeedBurner 不能用了,还有 FeedSky,附个相关插件
- 高颜值游戏专属蓝牙耳机推荐,2020五款商城高人气蓝牙耳机
- 该如何在中国手机市场生存
热门文章
- linux系统连接校园无线网络,基于Linux环境下校园无线网络安全平台的设计与实现...
- MyBatisPlus 一对多、多对一、多对多的解决方案
- linux mount 远程目录文件拷贝,linux mount挂载u盘,从U盘拷贝文件到linux中
- 2021年我的应对计划
- 60行Python代码,打造自己的录屏软件!
- 2020届电子信息类专业保研经历分享
- Set的四种遍历方式
- Windows server 2012R2系统备份教程
- python写双色球的开发语言_Python实现的双色球生成功能示例
- 哈工大2022春软件构造学习笔记1