上传图片压缩

app/index/controller/Article.php

@@ -246,13 +246,14 @@ class Article extends BaseController
     {
         $file = request()->file('file');
 		try {
-			validate(['file'=>['fileExt'=>['jpg','jpeg','png']]])
+			validate(['file'=>['fileSize'=>'102400','fileExt'=>['jpg','jpeg','png']]])
             ->check(['file'=>$file]);
-			$savename = \think\facade\Filesystem::disk('public')->putFile('article_pic',$file);
+			
 		} catch (ValidateException $e) {
 			return json(['status'=>-1,'msg'=>$e->getMessage()]);
 		}
 		
+		$savename = \think\facade\Filesystem::disk('public')->putFile('article_pic',$file);
 		$upload = Config::get('filesystem.disks.public.url');
 
 		if($savename){

app/index/controller/User.php

@@ -137,7 +137,7 @@ class User extends BaseController
     {
         $file = request()->file('file');
 		try {
-			validate(['file'=>'fileSize:204800|fileExt:jpg,png,gif'])
+			validate(['file'=>'fileSize:204800|fileExt:jpg,png,gif,jpeg'])
             ->check(['file'=>$file]);
 			$savename = \think\facade\Filesystem::disk('public')->putFile('head_pic',$file);
 		} catch (think\exception\ValidateException $e) {
@@ -150,10 +150,11 @@ class User extends BaseController
 			//$image = \think\Image::open("uploads/$name_path");
 			//$image->thumb(168, 168)->save("uploads/$name_path");
 
-            //查出当前用户并把得到的用户头像更新
+            //查出当前用户头像删除原头像并更新
-            $userId = Session::get('user_id');
+			$imgPath = Db::name('user')->where('id',$this->uid)->value('user_img');
+			unlink('.'.$imgPath);
             $result = Db::name('user')
-                ->where('id',$userId)
+                ->where('id',$this->uid)
                 ->update(['user_img'=>$name_path]);
 			Cache::tag(['user','tagArtDetail','tagArt'])->clear();
             if($result) {

app/install/data/taoler.sql

@@ -299,10 +299,12 @@ CREATE TABLE `tao_collection` (
   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
   `article_id` int(11) NOT NULL COMMENT '文章id',
   `user_id` int(11) NOT NULL COMMENT '用户id',
+  `auther` varchar(20) NOT NULL COMMENT '作者',
+  `collect_title` varchar(80) NOT NULL COMMENT '收藏帖子标题',
   `create_time` int(11) NOT NULL DEFAULT '0' COMMENT '创建时间',
   `delete_time` int(11) NOT NULL DEFAULT '0' COMMENT '删除时间',
   PRIMARY KEY (`id`)
-) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='文章收藏表';
+) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=utf8 COMMENT='文章收藏表';
 
 -- ----------------------------
 -- Records of tao_collection

public/static/res/mods/imgcom.js

@@ -0,0 +1,112 @@
+/**
+  images压缩扩展模块
+  changlin_zhao@qq.com
+  2021.5.25
+**/      
+ 
+layui.define(['upload','layer'],function(exports){ 
+var upload = layui.upload;
+var layer = layui.layer;
+var compressImage = {
+	uploads:  function(obj){
+	//obj.preview(function(index, file, result){
+				 
+		//执行实例
+					
+		var files = obj.pushFile();
+		var filesArry = [];
+		for (var key in files) { //将上传的文件转为数组形式
+		  filesArry.push(files[key])
+		}
+		var index = filesArry.length - 1;
+		var file = filesArry[index]; //获取最后选择的图片,即处理多选情况
+ 
+		if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
+			.replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
+		  return obj.upload(index, file)
+		}
+		canvasDataURL(file, function (blob) {
+		  var aafile = new File([blob], file.name, {
+			type: file.type
+		  })
+		  var isLt1M;
+		  if (file.size < aafile.size) {
+			isLt1M = file.size
+		  } else {
+			isLt1M = aafile.size
+		  }
+ 
+		  if (isLt1M / 1024 / 1024 > 2) {
+			return layer.alert('上传图片过大！')
+		  } else {
+			if (file.size < aafile.size) {
+			  return obj.upload(index, file)
+			}
+			obj.upload(index, aafile)
+		  }
+		})
+					  
+					
+				 
+				 
+	  function canvasDataURL(file, callback) { //压缩转化为base64
+		var reader = new FileReader()
+		reader.readAsDataURL(file)
+		reader.onload = function (e) {
+		  const img = new Image()
+		  const quality = 0.4 // 图像质量
+		  const canvas = document.createElement('canvas')
+		  const drawer = canvas.getContext('2d')
+		  img.src = this.result
+		  img.onload = function () {
+		  
+		  var originWidth = img.width,/* 图片的宽度 */
+		  originHeight = img.height; /* 图片的高度 */
+		  
+		  // 设置最大尺寸限制，将所有图片都压缩到小于1m
+			const maxWidth = 1024, maxHeight = 1024;
+			// 需要压缩的目标尺寸
+			let targetWidth = originWidth, targetHeight = originHeight;
+			// 等比例计算超过最大限制时缩放后的图片尺寸
+			if (originWidth > maxWidth || originHeight > maxHeight) {
+				if (originWidth / originHeight > 1) {
+					// 宽图片
+					targetWidth = maxWidth;
+					targetHeight = Math.round(maxWidth * (originHeight / originWidth));
+				} else {
+					// 高图片
+					targetHeight = maxHeight;
+					targetWidth = Math.round(maxHeight * (originWidth / originHeight));
+				}
+			}
+				
+			canvas.width = targetWidth;
+			canvas.height = targetHeight;
+			drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
+			convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
+		  }
+		}
+	  }
+	 
+	  function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
+		const arr = urlData.split(',')
+		const mime = arr[0].match(/:(.*?);/)[1]
+		const bstr = atob(arr[1])
+		let n = bstr.length
+		const u8arr = new Uint8Array(n)
+		while (n--) {
+		  u8arr[n] = bstr.charCodeAt(n)
+		}
+		callback(new Blob([u8arr], {
+		  type: mime
+		}));
+	  }
+
+		
+	//})
+	}
+ }		
+  //输出 imgcom 接口
+  exports('imgcom', compressImage);
+});    
+      

public/static/res/mods/index.js

@@ -156,7 +156,7 @@ layui.define(['layer', 'laytpl', 'form', 'element', 'upload', 'util', 'imgcom'],
                           ,'<button type="button" class="layui-btn layui-btn-primary" id="uploadImg"><i class="layui-icon">&#xe67c;</i>上传图片</button>'
                           ,'</li>'
                           ,'<li class="layui-form-item" style="text-align: center;">'
-                          ,'<button type="button" lay-submit lay-filter="uploadImages" class="layui-btn">确认</button>'
+                          ,'<button type="button" lay-submit lay-filter="uploadImages" class="layui-btn" id="img-button">确认</button>'
                           ,'</li>'
                           ,'</ul>'].join('')
                       ,success: function(layero, index){
@@ -170,9 +170,16 @@ layui.define(['layer', 'laytpl', 'form', 'element', 'upload', 'util', 'imgcom'],
 							  ,exts: 'jpg|png|gif|bmp|jpeg'
                               ,url: textImgUpload
 							  ,auto: false
+							  //,bindAction: '#img-button' //指向一个按钮触发上传
+							  //,field: 'image'
                               ,size: 10240
+							  ,choose: function (obj) { //选择文件后的回调
+								imgcom.uploads(obj);
+							  }
+      
                               ,done: function(res){
                                   if(res.status == 0){
+									  //console.log(res.url);
                                       image.val(res.url);
                                   } else {
                                       layer.msg(res.msg, {icon: 5});

public/static/res/mods/user.js

@@ -4,7 +4,7 @@
 
  */
  
-layui.define(['laypage', 'fly', 'element', 'flow'], function(exports){
+layui.define(['laypage', 'fly', 'element', 'flow', 'imgcom'], function(exports){
 
   var $ = layui.jquery;
   var layer = layui.layer;
@@ -16,6 +16,7 @@ layui.define(['laypage', 'fly', 'element', 'flow'], function(exports){
   var flow = layui.flow;
   var element = layui.element;
   var upload = layui.upload;
+  var imgcom = layui.imgcom;
   var table = layui.table;
 
   var gather = {}, dom = {
@@ -155,8 +156,15 @@ layui.define(['laypage', 'fly', 'element', 'flow'], function(exports){
 
       upload.render({
         elem: '.upload-img'
+		,accept: 'images'
+		,acceptMime: 'image/*'
+		,exts: 'jpg|png|gif|bmp|jpeg'
         ,url: uploadHeadImg
-        ,size: 300
+        ,size: 10240
+		,auto: false
+		,choose: function (obj) { //选择文件后的回调
+				imgcom.uploads(obj);
+			}
         ,before: function(){
           avatarAdd.find('.loading').show();
         }