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

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

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

在项目中经常用到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
类型不支持哪些未知
像素长宽限制未知

代码我随便偷的 您别吐槽

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

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

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

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

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

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

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

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

进一步的事实核查：

n0099 由js实现的裁剪选区窗口

具体是指的扩展 https://github.com/FriendsOfFlarum/profile-image-crop

追溯上传网络请求的callstack我们可以找到

在这里可以看见上传网络请求的multipart/form-data的第一个文件的二进制内容来自blob变量，而blob变量又来自L90的canvas.toBlob()的返回值，根据其文档 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob 可知由于这里没有额外参数指定使用jpg或webp压缩并提供压缩quality值导致其会直接返回没有压缩的png，这也解释了此前

n0099

为什么能够指png为jpg

事实是这问题在扩展用户之中早有预言：
https://discuss.flarum.org/d/18286/28
https://github.com/FriendsOfFlarum/profile-image-crop/issues/15
并早已有人修复了这个问题并在3个月前其pr被merge
https://github.com/FriendsOfFlarum/profile-image-crop/pull/17
但不幸地

由浏览器扩展 https://github.com/refined-github/refined-github 向我提醒的

The merge commit doesn’t appear in any tags

意味着截止2022年11月，这个pr所造成的更改仍未反映在任何github tags及对应的packagist包版本之中
目前这个扩展的最新版本是去年11月发布的1.0.1，其对应的github tags和commit是 https://github.com/FriendsOfFlarum/profile-image-crop/commits/master#:~:text=Remove%20Bazaar%20reference

对于此问题我已致电该扩展repo的有关人士催促其进行一个包流程的发布： https://github.com/FriendsOfFlarum/profile-image-crop/pull/17#issuecomment-1296220944