急，为什么我的头像上传不了

BSDS集团

creeper568 提示必须在2048kb以内

BSDS集团

Wien 贴吧里艾特你了，你看看

Viennahl2rd

BSDS集团您为什么不直接私信...最后您记得删除一下
虽然这个号是买的
我切了十多个贴吧号才想起这个号
账号密码都忘了... 还好有网页缓存记录

Viennahl2rd

BSDS集团是分辨率
您发帖吧我再保存的图是压缩过的
所以我这边用没有问题

BSDS集团

Viennahl2rd 😭麻烦你了

Viennahl2rd

在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。

<input type="file" name="files" id="file" οnchange="verificationPicFile(this)">
1.
//图片类型验证
function verificationPicFile(file) {
    var fileTypes = [".jpg", ".png"];
    var filePath = file.value;
    //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false
    if(filePath){
        var isNext = false;
        var fileEnd = filePath.substring(filePath.indexOf("."));
        for (var i = 0; i < fileTypes.length; i++) {
            if (fileTypes[i] == fileEnd) {
                isNext = true;
                break;
            }
        }
        if (!isNext){
            alert('不接受此文件类型');
            file.value = "";
            return false;
        }
    }else {
        return false;
    }
}

//图片大小验证
function verificationPicFile(file) {
    var fileSize = 0;
    var fileMaxSize = 1024;//1M
    var filePath = file.value;
    if(filePath){
        fileSize =file.files[0].size;
        var size = fileSize / 1024;
        if (size > fileMaxSize) {
            alert("文件大小不能大于1M！");
            file.value = "";
            return false;
        }else if (size <= 0) {
            alert("文件大小不能为0M！");
            file.value = "";
            return false;
        }
    }else{
        return false;
    }
}

//图片尺寸验证
function verificationPicFile(file) {
    var filePath = file.value;
    if(filePath){
        //读取图片数据
        var filePic = file.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();
            image.οnlοad=function(){
                var width = image.width;
                var height = image.height;
                if (width == 720 | height == 1280){
                    alert("文件尺寸符合！");
                }else {
                    alert("文件尺寸应为：720*1280！");
                    file.value = "";
                    return false;
                }
            };
            image.src= data;
        };
        reader.readAsDataURL(filePic);
    }else{
        return false;
    }
}

@n0099 请问您设置的参数是多大
已知图片大小是2m
类型不支持哪些未知
像素长宽限制未知

代码我随便偷的您别吐槽

有无必要部署类似于微信头像这种自动压缩节约服务器空间功能

n0099

Viennahl2rd 请问您设置的参数是多大
已知图片大小是2m
类型不支持哪些未知
像素长宽限制未知

我没设过，flarum又不是我写的

Viennahl2rd 代码我随便偷的您别吐槽

我都不知道您从不知道csdn还是哪儿复制粘贴一坨js代码来在前端过滤上传图片的实现干嘛

Viennahl2rd 有无必要部署类似于微信头像这种自动压缩节约服务器空间功能

flarum本身就会压头像分辨率到100x100

Wien

BSDS集团所以您为什么不直接采用已经压缩完毕的100×100或者是尝试类似于这个107×111的等比例略缩

n0099

根据四叶tg群与 @Wien 的讨论结果：

n0099 我没设过，flarum又不是我写的

结合flarum有关源码 https://github.com/flarum/framework/blob/main/framework/core/src/User/AvatarValidator.php
我的总结是提前v吧前前吧主BSDS集团阁下将您无法上传的图片原图以任意途径渠道发给我以便彻查其背后的原因

Wien

n0099 确实如此上传成功后再下载就是100•100

Wien

n0099 盼羊归😭

BSDS集团

n0099

Wien 他只要上传到本坛了就行了
我可以去拿到转webp之前他上传的图片文件

Wien 以及您的图片应该也不是最原始的图
一般来说数位板绘制的原图产出至少都是几M

现在问题的核心是获得

n0099 您无法上传的图片原图

这样我才有可能复现问题，而不是获得画师的原图

n0099

根据此前

n0099 根据四叶tg群与 @Wien 的讨论结果：

我以维也纳阁下推荐的 https://1024.day/d/59 为抓手
形成一套扔掉flarum默认的基于mysql fulltext index https://docs.flarum.org/extend/search/ 的方法论
打出了基于elasticsearch轻量级替代sonic的组合拳
赋能flarum那跟tg zulip一样烂的搜索
最终重新实现了在flarum自带的搜索中能搜到东西： https://n0099.net/v/?q=%E9%82%AA%E6%81%B6%E7%BB%84%E7%BB%87

但由于不知道是由于扩展flarum-sonic，还是其php通信sonic的依赖库ppshobi/psonic，还是sonic本身的问题
在扩展对sonic插入索引时遇到单条回复贴内容超长就会导致60s超时：
https://github.com/ganuonglachanh/flarum-sonic/issues/7#issuecomment-129727201

所以我只能暂时跳过了对这些极少数超长回复贴的索引：

也就意味着他们不可能被现在的flarum搜索给检索到

BSDS集团

Wien 太糊了😭

Wien

BSDS集团
 @n0099 对此早已有所预言：会webp压缩
图片目前大小为106Kb
所以还是得上传原文件到定向图床亦或是压缩包还原形式
以及您的图片应该也不是最原始的图
一般来说数位板绘制的原图产出至少都是几M

Wien

BSDS集团您即便上传后也是这个效果因为头像最后本身就是100×100显示
不如直接用之后的

n0099

Wien 图片目前大小为106Kb

事实核查：他上传的原图也只有

$ file 1667113773-811898-1666748230997.jpg
1667113773-811898-1666748230997.jpg: JPEG image data, JFIF standard 1.01, resolution (DPI), density 96x96, segment length 16, comment: "CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 90", baseline, precision 8, 1696x1718, components 3

Wien

n0099 事实是这样
上传如果是直接最大裁剪那自然不行

然后变小一点就行了
所以还是原图像素点数量的问题，超过了函数的上限

以及这只是个人对于裁剪的问题想要保留完整性所以刻意将圆形裁剪显示拉到最大
QQ tieba 微信当然随便这么玩因为服务器自动压缩为纵横的一两百原比例像素
就像qq头像表面上是圆形实际上还是方形吧如果直接拉到近似于最大那等于没裁
那像素点这么多肯定不满足啊

BSDS集团

n0099 😭我保存下来是600k实际查看是312k

n0099

Wien qq头像表面上是圆形实际上还是方形吧

大多数圆形头像都是在显示的地方做裁剪，而不是服务端实际存储的头像图片是圆形（至于圆之外的图片边界框之内的像素是纯白还是纯黑还是png的alpha通道255（全透明）是实现细节）

Wien 那像素点这么多肯定不满足啊

满足什么？

n0099

Wien 您说的很对，但事实是这个由js实现的裁剪选区窗口输出的图片是高度原始的png，然后再把裁剪了的png传给flarum服务端

而当对于这张jpg，选区拖到最外面后其产生的png大小是2409795字节
正好超过了flarum服务端硬编码的的2048kib的文件字节限制：
https://github.com/flarum/framework/blob/201d7430feaaace581a07b15fd1161179da441ff/framework/core/src/User/AvatarValidator.php#L100

Wien

n0099 满足小于2m字节上限

n0099

可以复现

Wien

n0099 真•对症下药