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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
UniApp 是一个基于 Vue.js 开发跨平台多端应用的框架,用于开发跨平台应用程序。压缩图片文件UniApp 应用开发过程中的常见任务,下面是有关如何进行压缩图片文件的介绍: 一、压缩图片: 1. 使用图片编辑工具:可以使用常见的图片编辑工具(如 Photoshop、GIMP、Paint.NET 等)对图片进行压缩,减小文件大小。 2. 使用在线工具:有许多在线图片压缩工具可供选择,如 TinyPNG、Compress JPEG 等。这些工具通常提供免费和付费的选项,可以根据需要选择合适的工具。 3. 在代码中压缩:在 UniApp 开发中,可以使用代码库或插件来压缩图片。例如,使用第三方库如 uni-app-compressor-image,它提供了在服务器端对图片进行压缩的功能。 二、文件压缩: 1. 使用 UniApp 提供的工具:UniApp 提供了一些内置的工具和 API,可用于压缩文件。例如,可以使用 uni.compressFile API 将文件进行压缩,并将其保存到指定的位置。 2. 使用第三方库:UniApp 也有一些第三方库可用于文件压缩,如 uni-app-zip 或 uni-app-upload-downloader。这些库提供了对文件进行压缩、解压和上传下载的功能。 需要注意的是,在进行压缩操作时,应确保不影响图片文件的清晰度和质量。适当的压缩可以减小文件大小,提高应用程序的性能和加载速度。 此外,还可以考虑使用云存储服务来存储压缩后的图片文件,以便在多个平台上共享和使用。例如,使用阿里云、腾讯云等提供的云存储服务,可以方便地管理图片文件,并实现跨平台的共享和访问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值