【交流分享】拍照、相册图片基本无损压缩上传示例

分类：HTML5+

技术分享图片压缩

经常看到有人说拍照上传图片闪退等等等问题，做个了个小实例，用了两年了，几十个客户的APP在用，没遇到过反馈拍照有问题的，需要的自己测试下你的手机能不能用，能用就copy吧，不能用就拉倒了，哈哈。

扫码测试：

apk，源码戳附件 ☟☟☟☟☟☟☟☟

拍照上传测试.rar

14 赞关注分享

23 个评论

要回复文章请先登录或注册

广东米可

封装远程路径的app获取不到安卓本地图片怎么办

2020-11-27 11:35

bge

我的努比亚手机上传图片时，打开相册就闪退

2020-10-17 17:25

1***@qq.com

plus.zip.compressImage 多图片压缩上传，我就是使用promise实现同步压缩的
selectImg() {
// 从相册中选择图片
var that = this;
if (that.maximum) {
that.ImgCount = that.maximum;
}
var files = [];
mui.plusReady(function() {
plus.gallery.pick(function(e) {
Indicator.open();
var actions = []; // 定义一个空的方法数组
for (var i in e.files) {
var action = () => { // 将每一次循环方法定义为一个方法变量
return new Promise(resolve => { // 每个方法返回一个Promise对象，第一个参数为resolve方法
((index) => {
var path = e.files[index];
var imgName = (new Date()).valueOf();
var imgSuffix = path.substring(path.lastIndexOf('.'), path.length);
plus.zip.compressImage({
src: path, //src: (String 类型 )压缩转换原始图片的路径
dst: "_doc/upload/" + imgName + imgSuffix, //压缩转换目标图片的路径
quality: 60, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件
},
function(event) {
files.push({ name: "uploadkey" + index, path: event.target });
resolve();
},
function(error) {
plus.nativeUI.toast("压缩图片失败，请稍候再试");
});
})(i)

})
}
actions.push(action()); // 将每次循环调用的方法添加到方法数组中
}
Promise.all(actions).then(() => { // 调用Promise的all方法，传入方法数组，结束后执行then方法参数中的方法
that.createUpload(files);
});
}, function(e) {}, {
filter: 'image',
multiple: true,
maximum: that.ImgCount,
// system: false,
onmaxed: function() {
plus.nativeUI.alert('最多只能选择' + that.ImgCount + '张图片');
}
});
});
},

2018-01-18 15:03

1***@qq.com

回复 1***@qq.com ：

plus.zip.compressImage 多图片压缩上传，我就是使用promise实现同步压缩的，selectImg() {
// 从相册中选择图片
var that = this;
if (that.maximum) {
that.ImgCount = that.maximum;
}
var files = [];
mui.plusReady(function() {
plus.gallery.pick(function(e) {
Indicator.open();
var actions = []; // 定义一个空的方法数组
for (var i in e.files) {
var action = () => { // 将每一次循环方法定义为一个方法变量
return new Promise(resolve => { // 每个方法返回一个Promise对象，第一个参数为resolve方法
((index) => {
var path = e.files[index];
var imgName = (new Date()).valueOf();
var imgSuffix = path.substring(path.lastIndexOf('.'), path.length);
plus.zip.compressImage({
src: path, //src: (String 类型 )压缩转换原始图片的路径
dst: "_doc/upload/" + imgName + imgSuffix, //压缩转换目标图片的路径
quality: 60, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件
},
function(event) {
files.push({ name: "uploadkey" + index, path: event.target });
resolve();
},
function(error) {
plus.nativeUI.toast("压缩图片失败，请稍候再试");
});
})(i)

})
}
actions.push(action()); // 将每次循环调用的方法添加到方法数组中
}
Promise.all(actions).then(() => { // 调用Promise的all方法，传入方法数组，结束后执行then方法参数中的方法
that.createUpload(files);
});
}, function(e) {}, {
filter: 'image',
multiple: true,
maximum: that.ImgCount,
// system: false,
onmaxed: function() {
plus.nativeUI.alert('最多只能选择' + that.ImgCount + '张图片');
}
});
});
},

2018-01-18 15:03

1***@qq.com

我也一直闪退，而且是偶然的，郁闷死，然后瞎猫碰到死耗子，我用promise包了一下，就没有出现了，你说奇不奇怪，photo() {
var that = this;
var files = [];
var cmr = plus.camera.getCamera();
mui.plusReady(function() {
cmr.captureImage(function(p) {
Indicator.open();
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var path = entry.toLocalURL();
var imgName = (new Date()).valueOf();
var imgSuffix = path.substring(path.lastIndexOf('.'), path.length);
var promise = new Promise(function(resolve, reject) {
plus.zip.compressImage({
src: path, //src: (String 类型 )压缩转换原始图片的路径
dst: "_doc/upload/" + imgName + imgSuffix, //压缩转换目标图片的路径
quality: 60, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件
},
function(event) {
files.push({ name: "uploadkey0", path: event.target });
resolve();
},
function(error) {
plus.nativeUI.toast("压缩图片失败，请稍候再试");
});
});

promise.then(() => { // 调用Promise的all方法，传入方法数组，结束后执行then方法参数中的方法
that.createUpload(files);
});
}, function(e) {
outLine('读取拍照文件错误：' + e.message);
});
}, function(e) {
outLine('失败：' + e.message);
}, { filename: '_doc/camera/', index: 1 });
});
},

2018-01-18 15:00

1***@qq.com

我打开相册压缩之后返回的是file:///开头的，没办法在远程webview上显示，用你的方法会提示Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/1516242557369.jpg at http://192.168.1.101:3000/operation/TaskRelease:0
Uncaught Error: 加载图片文件失败 at http://192.168.1.101:3000/static/js/lrz.bundle.js:1

2018-01-18 11:31