上传图片压缩
This commit is contained in:
taoser
parent
170d146af9
commit
95314c0f36
@ -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){
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
|
||||
|
||||
112
public/static/res/mods/imgcom.js
Normal file
112
public/static/res/mods/imgcom.js
Normal file
@ -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);
|
||||
});
|
||||
|
||||
@ -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"></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});
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user