网站长尾词挖掘,昆明网站建设案例,邢台信息港招聘求职,徐州服饰网站建设二次封装的uniapp版本图片压缩、上传工具#xff0c;支持全端#xff08;H5、小程序、APP#xff09; 新建文件#xff1a;file-util.js
class FileUtil {/*** [文件上传]* param {[object]} fileObj [图片地址]* param {[object]} formData [参数]* param {[str… 二次封装的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-utilFileUtil.upload(fileObj)
