【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 H5file = await this.compressByMp(fileObj)//#endif//#ifdef H5file = await this.compressByH5(fileObj, imageWidth)//#endifreturn 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.messageuni.showToast({title: tip})reject(dataJson)}} else {let tip = '上传失败'if (dataJson && dataJson.message) tip = dataJson.messageuni.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)