uniapp 压缩图片获取文件路径,通过路径获取file图片,进行MD5加密
1、选择图片
plus.nativeUI.actionSheet({
cancel: '取消',
buttons: [{
title: '拍照'
}, {
title: '相册'
}]
},
(res) => {
var index = e.index;
switch (index) {
case 0:
break;
case 1:
var cmr= plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
cmr.captureImage((path) => {
this.uploadPhoto(path);
},
(error) => {
console.log("Capture image failed: " + error.message);
}, {
resolution: res,
format: fmt
}
);
break;
case 2:
plus.gallery.pick((path) => {
this.uploadPhoto(path);
}, (e) => {
console.log("取消选择图片");
}, {
filter: "image"
});
break;
}
},
});
2、压缩图片并进行MD5加密
npm i spark-md5 --save
import SparkMD5 from 'spark-md5'
Vue.prototype.$sparkMD5 = SparkMD5
function uploadPhoto(path){
let pathDst = path.substring(0, path.lastIndexOf("."));
plus.zip.compressImage(
{
src: path,
dst: pathDst,
quality: 20,
overwrite: true,
format: 'jpg',
width: "auto",
height: "auto",
},
() => {
path = pathDst;
const _this = this
plus.io.resolveLocalFileSystemURL(path, function(entry) {
entry.file(
function(file){
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
let spark = new _this.$sparkMD5()
spark.appendBinary(e.target.result)
let md5 = spark.end()
_this.uploadFileFun(path, md5)
}
}
)
});
}
);
},
3、上传图片
function uploadFileFun(path, md5){
uni.uploadFile({
url: '上传地址' + `?md=${ md5 ? md5 : '' }`,
filePath: path,
name: 'file',
header: '上传header',
success: (res) => {
uni.showToast({title:"头像上传成功!", position: "bottom"})
},
fail: (res) => {
uni.showToast({title:"头像上传失败!", position: "bottom"})
}
})
}
完整代码
function openPhoto() {
plus.nativeUI.actionSheet({
cancel: '取消',
buttons: [{
title: '拍照'
}, {
title: '相册'
}]
},
(res) => {
var index = e.index;
switch (index) {
case 0:
break;
case 1:
var cmr= plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
cmr.captureImage((path) => {
this.uploadPhoto(path);
},
(error) => {
console.log("Capture image failed: " + error.message);
}, {
resolution: res,
format: fmt
}
);
break;
case 2:
plus.gallery.pick((path) => {
this.uploadPhoto(path);
}, (e) => {
console.log("取消选择图片");
}, {
filter: "image"
});
break;
}
},
})
},
function uploadPhoto(path){
let pathDst = path.substring(0, path.lastIndexOf("."));
plus.zip.compressImage(
{
src: path,
dst: pathDst,
quality: 20,
overwrite: true,
format: 'jpg',
width: "auto",
height: "auto",
},
() => {
path = pathDst;
const _this = this
plus.io.resolveLocalFileSystemURL(path, function(entry) {
entry.file(
function(file){
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
let spark = new _this.$sparkMD5()
spark.appendBinary(e.target.result)
let md5 = spark.end()
_this.uploadFileFun(path, md5)
}
}
)
});
}
);
},
function uploadFileFun(path, md5){
uni.uploadFile({
url: '上传地址' + `?md=${ md5 ? md5 : '' }`,
filePath: path,
name: 'file',
header: '上传header',
success: (res) => {
uni.showToast({title:"头像上传成功!", position: "bottom"})
},
fail: (res) => {
uni.showToast({title:"头像上传失败!", position: "bottom"})
}
})
}