js 上传图片限制分辨率

小薛不会打代码

于 2022-06-15 16:22:27 发布

阅读量737

点赞数

CC 4.0 BY-SA版权

分类专栏：上传头像文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46191691/article/details/125299496

上传头像专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript在用户上传图片前进行分辨率检查，确保上传的图片符合指定要求，减少服务器处理负担并提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

imgChange() {
            if (event.target.files.length == 0) {
                return;
            } else {
                let that = this;
                var mapPictureSize = [];

                let file = event.target.files[0];

                var reader = new FileReader;

                reader.onload = function (evt) {

                    var image = new Image();

                    image.onload = function () {

                        mapPictureSize[0] = this.width + "";
                        mapPictureSize[1] = this.height + "";

                        console.log(mapPictureSize);

                        let size = 500 * 1024;
                        if (file.size > size) {
                            that.$refs.imgupload.value = '';
                            return that.uploadStatus = true;
                        }
                        if (mapPictureSize[0] != 800 && mapPictureSize[1] != 600) {
                            that.$refs.imgupload.value = '';
                            return that.uploadStatus = true;
                        }
                        that.uploadStatus = false;
                        // console.log(file)
                        let fromdata = new FormData();
                        fromdata.append('files', file);
                        uploadFile(fromdata).then((res) => {
                            // console.log(res);
                            that.info.coverUrl = res.result[0].fileId;
                        })

                        that.$refs.imgupload.value = '';
                    };
                    image.src = evt.target.result;
                };
                reader.readAsDataURL(file);

            }
        }