uniapp 压缩图片获取文件路径,通过路径获取file图片,进行MD5加密

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加密

//在项目中安装spark-md5
npm i spark-md5 --save


//在main.js文件中引入MD5
import SparkMD5 from 'spark-md5'
// vue原型链挂载
Vue.prototype.$sparkMD5 = SparkMD5
function uploadPhoto(path){
	//let pathDst = '自定义路径'
    let pathDst = path.substring(0, path.lastIndexOf("."));
    //压缩图片
    plus.zip.compressImage(
      {
        src: path, //原路径
        dst: pathDst, //缩略图路径
        quality: 20, //1-100,1图片最小,100图片最大
		overwrite: true, // 覆盖文件 是否生成新图片
		format: 'jpg', // 格式
        width: "auto", //缩略固定宽
        height: "auto", //缩略固定高
      },
      () => {
    	//通过路径获取file
		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) {
    					//进行MD5加密
						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 = '自定义路径'
    let pathDst = path.substring(0, path.lastIndexOf("."));
    //压缩图片
    plus.zip.compressImage(
      {
        src: path, //原路径
        dst: pathDst, //缩略图路径
        quality: 20, //1-100,1图片最小,100图片最大
		overwrite: true, // 覆盖文件 是否生成新图片
		format: 'jpg', // 格式
        width: "auto", //缩略固定宽
        height: "auto", //缩略固定高
      },
      () => {
    	//通过路径获取file
		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) {
    					//进行MD5加密
						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"})
		}
	})
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值