【UNIAPP】uniapp版图片压缩工具

二次封装的uniapp版本图片压缩、上传工具，支持全端（H5、小程序、APP）

• 新建文件：file-util.js 

class FileUtil {
	/**
	 * [文件上传]
	 * @param  {[object]} fileObj    [图片地址]
	 * @param  {[object]} formData   [参数]
	 * @param  {[string]} url        [上传地址]
	 * @param  {[boolean]} compress  [是否压缩]
	 * @return {[Promise]}         [description]
	 */
	async uploadFile(fileObj, formData = {}, url, compress = true) {
		if (!fileObj) {
			return uni.showToast({
				title: '找不到文件~'
			});
		}

		setTimeout(() => {
			uni.showLoading({
				title: '上传中...',
				mask: true,
			})
		}, 500)

		let file = fileObj;
		if (compress) {
			file = await this.compressImage(fileObj)
		}

		return this.upload(file, formData, url)
	}

	/**
	 * 
	 * @param {Object} fileObj [文件对象]
	 * @param {Object} imageWidth 图片宽度
	 */
	async compressImage(fileObj, imageWidth = 500) {
		let file = fileObj;
		//#ifndef H5
		file = await this.compressByMp(fileObj)
		//#endif

		//#ifdef H5
		file = await this.compressByH5(fileObj, imageWidth)
		//#endif
		return file
	}

	/**
	 * [压缩图片-小程序/APP]
	 * @param  {[type]} fileObj [description]
	 * @return {[type]}         [description]
	 */
	async compressByMp(fileObj) {
		return new Promise(resolve => {
			if (fileObj.size > 500000) {
				uni.compressImage({
					src: fileObj.path, // 图片路径
					quality: 60, // 压缩质量
					success(res) {
						let file = {
							name: fileObj.name,
							type: fileObj.type,
							size: fileObj.size,
							path: res.tempFilePath
						}
						resolve(file)
					},
					fail(error) {
						console.warn('图片压缩异常,使用原图', error)
						resolve(fileObj)
					}
				})
			} else {
				console.warn('500K以下不压缩')
				resolve(fileObj)
			}
		})
	}
	/**
	 * H5压缩
	 * @param {Object} fileObj 文件对象
	 * @param {Object} imageWidth 图片宽度
	 * @returns
	 */
	compressByH5(fileObj, imageWidth) {
		return new Promise(resolve => {
			try {
				uni.getImageInfo({
					src: fileObj.path,
					success: function(res) {
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height;
						let base = canvasWidth / canvasHeight;
						if (canvasWidth > imageWidth) {
							canvasWidth = imageWidth;
							canvasHeight = Math.floor(canvasWidth / base);
						}
						let img = new Image();
						img.src = fileObj.path; // 要压缩的图片  
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d');
						canvas.width = canvasWidth;
						canvas.height = canvasHeight;

						//  将图片画到canvas上面   使用Canvas压缩  
						ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
						canvas.toBlob(function(fileSrc) {
							let imgSrc = window.URL.createObjectURL(fileSrc); //原生JS生成文件路径
							uni.downloadFile({
								url: imgSrc, //仅为示例，并非真实的资源
								success: (res) => {
									console.log('downloadFile', res)
									if (res.statusCode === 200) {
										let file = {
											name: fileObj.name,
											type: fileObj.type,
											size: fileObj.size,
											path: res.tempFilePath
										}
										resolve(file)
									} else {
										console.warn('图片压缩异常,使用原图', res)
										resolve(fileObj)
									}
								},
								fail(error) {
									console.warn('图片压缩异常,使用原图', error)
									resolve(fileObj)
								}
							})
						});
					}
				})
			} catch (e) {
				console.warn('图片压缩异常,使用原图', e)
				resolve(file)
			}
		})
	}
	/**
	 * 图片转base64 - H5
	 * @param {Object} file
	 * @param {Object} imageWidth
	 * @returns
	 */
	compresToBase64ForH5(file, imageWidth) {
		return new Promise((resolve, reject) => {
			try {
				uni.getImageInfo({
					src: file.path,
					success: function(res) {
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height;
						let base = canvasWidth / canvasHeight;
						if (canvasWidth > imageWidth) {
							canvasWidth = imageWidth;
							canvasHeight = Math.floor(canvasWidth / base);
						}
						let img = new Image();
						img.src = file.path; // 要压缩的图片  
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d');
						canvas.width = canvasWidth;
						canvas.height = canvasHeight;

						//  将图片画到canvas上面   使用Canvas压缩  
						ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
						var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
						var dataURL = canvas.toDataURL("image/" + ext);
						resolve(dataURL)
					}
				})
			} catch (e) {
				reject(e)
			}
		})
	}
	/**
	 * 上传到服务器 (响应报文按实际情况调整)
	 * @param {Object} file
	 * @param {Object} formData
	 * @param {Object} url
	 */
	upload(file, formData, url) {
		console.log(file)
		if (!formData) formData = {}
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url,
				filePath: file.path,
				formData,
				name: 'file',
				header: {
					"chartset": "utf-8",
					'X-Access-Token': "token",
					// "content-type":'application/x-www-form-urlencoded'
				},
				success(res) {
					let dataJson = JSON.parse(res.data)
					if (res.statusCode == 200) {
						// resolve(decodeURIComponent(data))
						if (dataJson.success) {
							resolve(dataJson.result)
						} else {
							let tip = '上传失败'
							if (dataJson && dataJson.message) tip = dataJson.message
							uni.showToast({
								title: tip
							})
							reject(dataJson)
						}
					} else {
						let tip = '上传失败'
						if (dataJson && dataJson.message) tip = dataJson.message
						uni.showToast({
							title: tip
						})
						reject(dataJson)
					}
				},
				fail(error) {
					let message = error.errMsg;
					if (message.indexOf('uploadFile:fail timeout') > -1) message = '上传超时，请尝试压缩图片'
					else if (message.indexOf('uploadFile:fail') > -1) message = '服务器或网络异常，信息提交失败！'
					else message = '上传失败'
					uni.showToast({
						title: message
					})
					reject(error)
				},
				complete(res) {
					console.log(res)
					setTimeout(() => {
						uni.hideLoading();
					}, 500)
				}
			})
		})
	}
}

export default new FileUtil()

•  使用：

import FileUtil from '@/utils/file-util'

FileUtil.upload(fileObj)