devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

若依移动端Ruoyi-App——上传图片使用compressorjs处理图片压缩，自动计算压缩比率，支持h5

作者：2023面试高手 | 2024-04-04 17:37:11

赞

踩

compressorjs

背景：

（1）uniapp图片上传存在图片太大，上传时间长的问题，需要将图片压缩上传，

（2）图片压缩比率因大小不同而不同。
（3）uniapp.compressImage不支持h5，而且只能压缩jpg文件

解决方案：

’本文使用uniapp的uni-file-picker进行图片上传，uview的图片上传也可以参考使用。

（1）先把图片都转换为jpg格式文件

（2 ）然后计算压缩比率。压缩率compressorjs使用的范围是0-1，uniapp.compressImage使用的是0-100，需要转换下。

（3）最后h5压缩使用compressorjs，非h5压缩使用uniapp.compressImage。

（4）部署到服务器，修改nginx默认长传文件的大小

经验证，本程序只支持h5，小程序uniapp.compressImage只支持jpg文件。

如需支持h5，小程序，app，请转若依移动端Ruoyi-App——使用helang-compress组件压缩上传图片，支持App，小程序，h5，也支持各类格式图片文件。_鲸鱼姐的博客-CSDN博客

效果如下

 

1. 图片压缩首先安装compressorjs

npm install compressorjs --save

2. 创建imageCompress.js，使用图片压缩，本文压缩后返回的类型是blob

  1. import Compressor from 'compressorjs';
  2. // 只能对jpeg格式的图片进行转换
  3. /**
  4.  * @param image 图片
  5.  * @param backType 需要返回的类型blob,file
  6.  * @param quality 图片压缩比 0-1,数字越小，图片压缩越小
  7.  * @returns
  8.  */
  9. export default function ImageCompressor(image, backType, quality) {
  10.     return new Promise((resolve, reject) => {
  11.         new Compressor(image, {
  12.             quality: quality || 0.6,
  13.             success(result) {
  14.  
  15.                 let file = new File([result], image.name, { type: image.type })
  16.                 if (!backType || backType == 'blob') {
  17.                     resolve(result)
  18.                 } else if (backType == 'file') {
  19.                     resolve(file)
  20.                 } else {
  21.                     resolve(file)
  22.                 }
  23.             },
  24.             error(err) {
  25.                 console.log('图片压缩失败---->>>>>', err)
  26.                 reject(err)
  27.             }
  28.         })
  29.     })
  30. }
  31.

3. 创建ConvertImage.js将非jpeg图片转化成jpeg图片

  1. // 思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，
  2. //然后用canvas的drawImage将图片与canvas合起来，然后在把canvas的base64转成file即可
  3. export default function ConvertImage(file) {
  4.     return new Promise((resolve, reject) => {
  5.         const fileName = file.name.substring(0, file.name.indexOf('.'));
  6.         let reader = new FileReader(); //读取file
  7.         reader.readAsDataURL(file);
  8.         reader.onloadend = function (e) {
  9.             let image = new Image() //新建一个img标签（还没嵌入DOM节点)
  10.             image.src = e.target.result //将图片的路径设成file路径
  11.             image.onload = function () {
  12.                 let canvas = document.createElement('canvas'),
  13.                     context = canvas.getContext('2d'),
  14.                     imageWidth = image.width,    
  15.                     imageHeight = image.height,
  16.                     data = ''
  17.                 canvas.width = imageWidth
  18.                 canvas.height = imageHeight
  19.  
  20.                 context.drawImage(image, 0, 0, imageWidth, imageHeight)
  21.                 data = canvas.toDataURL('image/jpeg')
  22.                 var newfile = dataURLtoFile(data, fileName + '.jpeg');
  23.                 resolve(newfile)
  24.             }
  25.         }
  26.     })
  27. }
  28. function dataURLtoFile(dataurl, filename) { // base64转file对象
  29.     let arr = dataurl.split(','),
  30.         mime = arr[0].match(/:(.*?);/)[1],
  31.         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  32.     while (n--) {
  33.         u8arr[n] = bstr.charCodeAt(n);
  34.     }
  35.     return new File([u8arr], filename, { type: mime });  //转成了jpeg格式
  36. }

3. 图片压缩页面的代码如下

  1. <template>
  2. 	<view class="u-page">
  3. 		<view class="u-demo-block">
  4. 			<view class="u-demo-block__content">
  5. 				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
  6. 				<u--form
  7. 					labelPosition="left"
  8. 					:model="form"
  9. 					ref="form1"
  10. 				>
  11. 					<u-form-item
  12. 						label="选择照片"
  13. 						prop="form.problemDescription"
  14. 						borderBottom
  15. 						labelWidth="80"
  16. 						ref="item3"
  17. 					>
  18. 	      	<uni-file-picker
  19. 			     :source-type="sourceType"
  20. 				 :sizeType="sizeType"
  21. 		          v-model="fileList1" 
  22. 		          mode="grid" 
  23. 		          @select="select" 
  24. 		          @progress="progress" 
  25. 		          @success="success" 
  26. 		          @delete ="deletephoto" 
  27. 		          @fail="fail"
  28. 		       ref="upload"
  29. 		       limit="9"
  30. 		      />
  31. 		     </uni-file-picker>
  32. 			 </u-form-item>
  33. 			</u--form>
  34. 			</view>
  35. 		</view>
  36. 	</view>
  37. </template>
  38.  
  39. <script>
  40. 	 import { getToken } from "@/utils/auth";
  41. 	 import ImageCompressor from "@/utils/imageCompressor"
  42. 	 import ConvertImage from "@/utils/ConvertImage"
  43. 	 import config from '@/config'
  44. 	export default {
  45. 		data() {
  46. 			return {
  47. 				sourceType: ['album', 'camera'],
  48. 				sizeType: ['compressed'],
  49. 				fileMaxSize: 2 * 1024 * 1024, // 默认最大为2M
  50. 				fileMinSize: 50 * 1024, // 最小为50KB
  51. 				form: {},
  52. 				fileList1: {}, 
  53. 				imgSrc:{},
  54. 				images: [],
  55. 			}
  56. 		},
  57. 		onReady() {
  58.  
  59. 		},
  60. 		mounted() {
  61. 		   // this.nowTimes()
  62. 		  },
  63. 		onLoad(option) {
  64. 		
  65. 		},
  66. 		methods: {
  67. 		
  68. 				// // 选择上传触发函数
  69. 			 async   select(e) {
  70. 			    // 根据所选图片的个数，多次调用上传函数
  71. 				 this.btndisabled = true;
  72. 				 this.loadingflag = true;
  73. 				console.log("select")
  74. 				console.log(e.tempFilePaths)
  75. 			     let promises=[]
  76. 				 
  77. 			     for (let i = 0; i < e.tempFilePaths.length; i++) {
  78. 					
  79. 					let imgtemp=e.tempFiles[i].file
  80. 					 console.log('img')
  81. 					 console.log(e)
  82. 					const fileName = imgtemp.name ?? ''
  83. 					let url =imgtemp.path
  84. 					const fileType = fileName.substring(fileName.indexOf('.') + 1);
  85. 					console.log(fileType)
  86. 					     // 判断文件是不是jpeg 不是jpeg的都转成jpeg 
  87. 					 if (!['jpeg', 'jpg'].includes(fileType)) {
  88. 												console.log(fileType)
  89. 					        imgtemp = await ConvertImage(imgtemp);  //转陈jpeg格式的file
  90.                     }
  91.  
  92. 					const fileSize = imgtemp.size
  93. 					if (fileSize > this.fileMaxSize) {
  94. 					const compressionRatio = this.getCompressionRatio(fileSize)
  95. 					if (compressionRatio > 1) {
  96. 						uni.$u.toast('文件' + fileName + '大于10M')
  97. 						return false
  98. 					}
  99. 				console.log('压缩前文件' + fileName + '==compressionRatio'+compressionRatio+'===大小'+fileSize)
  100. 				// #ifdef H5
  101. 				   imgtemp = await ImageCompressor(imgtemp, 'blob', compressionRatio); //图片压缩
  102. 			     console.log('压缩后文件' + imgtemp.fileName + '====大小'+imgtemp.size)
  103. 				 url = window.URL.createObjectURL(imgtemp) 
  104. 				// #endif
  105. 				 // #ifndef H5
  106. 				    this.compressImg(e.tempFilePaths[i],compressionRatio*100,url)
  107. 				 // #endif
  108. 					}
  109. 				  console.log('压缩后文件' + url)
  110. 			       const promise =this.uploadFiles(url)
  111. 			       promises.push(promise)
  112. 				  }
  113. 			       Promise.all(promises).then(()=>{
  114. 			      })
  115. 			   },
  116. 			   
  117. 			// 图片压缩
  118. 			    compressImg(tempFilePath,compressionRatio,url){
  119. 			           uni.compressImage({
  120. 			             src: tempFilePath,
  121. 			              quality: compressionRatio,
  122. 			              success: info => {
  123. 							  url=info.tempFilePath
  124. 			              
  125. 			          }
  126. 			        })
  127. 			    },    
  128. 				// 图片压缩比例计算
  129. 			  	getCompressionRatio(fileSize) {
  130. 			  				const multiple = (fileSize / this.fileMaxSize).toFixed(2) // 获取文件大小倍数，生成质量比
  131. 			  				let compressionRatio = 1
  132. 			  				if(multiple > 5) {
  133. 			  					compressionRatio = 0.5
  134. 			  				} else if (multiple > 4) {
  135. 			  					compressionRatio = 0.6
  136. 			  				} else if (multiple > 3) {
  137. 			  					compressionRatio = 0.7
  138. 			  				}else if (multiple > 2) {
  139. 			  					compressionRatio = 0.8
  140. 			  				} else if (multiple > 1) {
  141. 			  					compressionRatio = 0.9
  142. 			  				} else {
  143. 			  					compressionRatio = 2
  144. 			  				}
  145. 			  					return compressionRatio;
  146. 			  	},
  147. 			   // 上传函数
  148. 			   async uploadFiles(tempFilePath){
  149. 				    const baseUrl = config.baseUrl
  150. 			      let that =this
  151. 			       await uni.uploadFile({
  152. 			         url: baseUrl+'/common/upload', //后端用于处理图片并返回图片地址的接口    
  153. 			         filePath:tempFilePath,    
  154. 			         name: 'file', 
  155. 			          header: {
  156. 			               Authorization: "Bearer " + getToken(),
  157. 			             },
  158. 			         success: res => {    
  159. 			         let data=JSON.parse(res.data) //返回的是字符串，需要转成对象格式   
  160. 			        let imageName=data.fileName				
  161. 					 that.images.push(imageName)
  162. 					 	console.log(that.images)
  163. 					 uni.showToast({ title: '上传成功', icon: "success" });
  164. 					   this.btndisabled = false;
  165. 					   this.loadingflag = false;
  166. 			         },   
  167. 			        fail: () => {
  168. 			         console.log("上传失败");
  169. 					 uni.showToast({ title: '上传失败', icon: "error" });
  170.  
  171. 			        }   
  172. 			       })      
  173. 			   },
  174. 			   // 移出图片函数
  175. 			   async deletephoto(){
  176. 			    this.fileList1 = {}
  177. 			   },
  178.  
  179. 			submit() {
  180. 					 
  181. 					console.log(this.images)
  182. 					this.form.problemPhotos=this.images.join(',');
  183. 					addProblems(this.form).then(response => {
  184. 					this.$modal.msgSuccess("新增成功");
  185. 												  
  186. 					})
  187. 					}).catch(errors => {
  188. 							uni.$u.toast('请扫码，填写问题，上传照片')
  189. 					})
  190. 			},
  191.            
  192. 		}
  193. 	}
  194. </script>
  195.

（1）压缩比率计算

  1.   	getCompressionRatio(fileSize) {
  2. 			  				const multiple = (fileSize / this.fileMaxSize).toFixed(2) // 获取文件大小倍数，生成质量比
  3. 			  				alert(fileSize+"==="+this.fileMaxSize+"==="+multiple)
  4. 			  				let compressionRatio = 1
  5. 			  				if(multiple > 5) {
  6. 			  					compressionRatio = 0.5
  7. 			  				} else if (multiple > 4) {
  8. 			  					compressionRatio = 0.6
  9. 			  				} else if (multiple > 3) {
  10. 			  					compressionRatio = 0.7
  11. 			  				}else if (multiple > 2) {
  12. 			  					compressionRatio = 0.8
  13. 			  				} else if (multiple > 1) {
  14. 			  					compressionRatio = 0.9
  15. 			  				} else {
  16. 			  					compressionRatio = 2
  17. 			  				}
  18. 			  					return compressionRatio;
  19. 			  	},

（2）压缩

  1. // #ifdef H5
  2. 	 imgtemp = await ImageCompressor(imgtemp, 'blob', compressionRatio); //图片压缩
  3. 	console.log('压缩后文件' + imgtemp.fileName + '====大小'+imgtemp.size)
  4. 	 url = window.URL.createObjectURL(imgtemp) 
  5. // #endif
  6. 	 // #ifndef H5
  7. 	  this.compressImg(e.tempFilePaths[i],compressionRatio*100,url)
  8. // #endif

（3）H5压缩后是blob，需要转bloburl

使用uni.uploadFile上传文件，filePath使用的是bloburl本地地址，blob:http://localhost:9092/e9a9042b-feab-4fed-99ff-81c1e6efdece

  1.   uni.uploadFile({
  2.                      url: '/prod-api/common/upload', //后端用于处理图片并返回图片地址的接口    
  3.                      filePath:tempFilePath,  
  4.                       ...  
  5.  
  6. })

因此需要将压缩后的blob文件转换成bloburl，这样才能展示及上传

 let url = window.URL.createObjectURL(newImg)

4.部署到服务器，修改nginx默认长传文件的大小

部署到服务器，出现 Request Entity Too Large问题

通过nginx发现服务代理的，问题就出现nginx服务器上，原来nginx默认长传文件的大小是1M，可在nginx的配置中修改。

解决方法：

（1）打开nginx服务的配置文件nginx.conf, 路径一般是：/usr/local/nginx/conf/nginx.conf。

（2）在http{}中加入client_max_body_size 100m，我这里配置的是100M。

http {
client_max_body_size 100m;
    include       mime.types;
    default_type  application/octet-stream;

（3）重新nginx服务。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/360180
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号