Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.3k views
in Technique[技术] by (71.8m points)

aliossUploader,如何限制上传图片的长宽比例?

现在这个插件没有限制上传图片的长宽比例的功能,如何优化一下呢?

layui.extend({}).define(['layer', 'upload'], function (exports) {
    var $ = layui.$,
        layer = layui.layer,
        upload = layui.upload,
        allUploaded = {},
        policyFailed = null,
        uploadData = [],
        prefixPath,
        layerTitle,
        filesss = {},
        successCount = 0,
        uploadCount = 0,
        filesListView = null,
        multiple = false,
        multipleFileArray = [],
        multipleFileKeyArray = [],
        uplaod = layui.upload;
    //加载样式

    var Class = function (options) {
        var that = this;
        that.options = options;
        that.init();
    };

    Class.prototype.init = function () {
        var that = this,
            options = that.options;
        if (options.layerArea) {
            layerArea = options.layerArea;
        } else {
            layerArea = 'auto';
        }
        if (options.multiple) {
            multiple = true;
        }
        if (!that.strIsNull(that.options.fileType)) {
            fileType = that.options.fileType;
        } else {
            fileType = 'file';
        }
        if (!that.strIsNull(that.options.httpStr)) {
            httpStr = that.options.httpStr;
        } else {
            httpStr = 'https';
        }
        if (!that.strIsNull(that.options.policyFiled)) {
            policyFiled = that.options.policyFiled;
        } else {
            policyFiled = 'policy';
        }
        if (!that.strIsNull(that.options.accessidFiled)) {
            accessidFiled = that.options.accessidFiled;
        } else {
            accessidFiled = 'accessid';
        }
        if (!that.strIsNull(that.options.codeFiled)) {
            codeFiled = that.options.codeFiled;
        } else {
            codeFiled = '';
        }
        if (!that.strIsNull(that.options.codeStatus)) {
            codeStatus = that.options.codeStatus;
        } else {
            codeStatus = 0;
        }
        if (!that.strIsNull(that.options.signatureFiled)) {
            signatureFiled = that.options.signatureFiled;
        } else {
            signatureFiled = 'signature';
        }
        if (!that.strIsNull(that.options.region)) {
            region = that.options.region;
        }
        if (!that.strIsNull(that.options.prefixPath)) {
            prefixPath = that.options.prefixPath;
        } else {
            prefixPath = '';
        }
        if (!that.strIsNull(that.options.policyUrl)) {
            policyUrl = that.options.policyUrl;
        }
        if (typeof that.options.policyData != 'undefined') {
            policyData = that.options.policyData;
        } else {
            policyData = {};
        }
        if (typeof that.options.policyHeader != 'undefined') {
            policyHeader = that.options.policyHeader;
        } else {
            policyHeader = {};
        }
        if (typeof that.options.uploadRenderData != 'undefined') {
            uploadRenderData = that.options.uploadRenderData;
        } else {
            uploadRenderData = {};
        }
        if (!that.strIsNull(that.options.policyMethod)) {
            policyMethod = that.options.policyMethod;
        } else {
            policyMethod = 'GET';
        }
        if (!that.strIsNull(that.options.bucket)) {
            bucket = that.options.bucket;
        }
        allUploaded[that.options.elm] = that.options.allUploaded;
        policyFailed = that.options.policyFailed;
        if (!that.strIsNull(that.options.layerTitle)) {
            layerTitle = that.options.layerTitle;
        } else {
            layerTitle = '上传文件到阿里云OSS';
        }
        if (multiple) {
            $(that.options.elm).on('click', function () {
                layer.open({
                    type: 1,
                    area: layerArea, //宽高
                    resize: false,
                    title: layerTitle,
                    content: '<div class="layui-col-md12">' +
                        '<div class="layui-card">' +
                        '<div class="layui-card-body">' +
                        '<div class="layui-upload">' +
                        '<button type="button" class="layui-btn layui-btn-normal" id="test-upload-files">选择多文件</button>' +
                        '<div class="layui-upload-list">' +
                        '<table class="layui-table">' +
                        '<thead>' +
                        '<tr>' +
                        '<th>文件名</th>' +
                        '<th>大小</th>' +
                        '<th>状态</th>' +
                        '<th>操作</th>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody id="test-upload-filesList"></tbody>' +
                        '</table>' +
                        '</div>' +
                        '<button type="button" class="layui-btn" id="test-upload-filesAction">开始上传</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>',
                    success: function (layero, index) {
                            $('#test-upload-filesAction').on('click', function () {
                                if (typeof uploadListIns.config.files == 'undefined') {
                                    layer.msg('请先选择要上传的文件!', {
                                        shade: 'rgba(0,0,0,0)'
                                    });
                                    return;
                                }
                                layer.open({
                                    type: 3,
                                    icon: 1
                                });
                                //先获取police信息
                                $.ajax({
                                    url: policyUrl,
                                    type: policyMethod,
                                    data: policyData,
                                    headers: policyHeader,
                                    success: function (res) {
                                        var successStatus = false;
                                        if (codeFiled) {
                                            if (res[codeFiled] == codeStatus) {
                                                successStatus = true;
                                            }
                                        } else {
                                            successStatus = true;
                                        }
                                        if (successStatus) {
                                            // 签名成功开始上传文件
                                            var files = uploadListIns.config.files;
                                            //清空原来返回的数组
                                            uploadData = [];
                                            var fileCount = 0;
                                            for (var filekey in files) {
                                                fileCount++;
                                            }
                                            res.data.signature = res.data[signatureFiled];
                                            res.data.accessid = res.data[accessidFiled];
                                            res.data.policy = res.data[policyFiled];
                                            for (var filekey in files) {
                                                var tr = filesListView.find('tr#upload-' + filekey),
                                                    tds = tr.children();
                                                if (tds.eq(2).text() == '等待上传') {
                                                    that.uploadFile(files, filekey, fileCount, res.data);
                                                } else {
                                                    // successCount++;
                                                    fileCount--;
                                                    if (fileCount == 0) {
                                                        layer.closeAll('loading');
                                                        layer.msg('没有文件需要上传');
                                                    }
                                                }
                                            }
                                        } else {
                                            policyFailed(res);
                                        }

                                    },
                                    error: function (res) {
                                        policyFailed(res);
                                    }
                                });

                            })
                            filesListView = $('#test-upload-filesList'),
                                uploadListIns = upload.render($.extend({
                                    elem: '#test-upload-files',
                                    url: httpStr + '://' + bucket + '.' + region + '.aliyuncs.com',
                                    accept: fileType,
                                    multiple: true,
                                    auto: false,
                                    choose: function (obj) {
                                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                                        //读取本地文件
                                        obj.preview(function (index, file, result) {
                                            var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size /
                                                    1014).toFixed(
                                                    1) + 'kb</td>', '<td>等待上传</td>', '<td>',
                                                '<button class="layui-btn layui-btn-mini test-upload-demo-reload layui-hide">重传</button>',
                                                '<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button>',
                                                '</td>',
                                                '</tr>'
                                            ].join(''));

                                            //删除
                                            tr.find('.test-upload-demo-delete').on('click', function () {
                                                delete files[index]; //删除对应的文件
                                                tr.remove();
                                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                                            });
                                            filesListView.append(tr);
                                        });
                                    }
                                }, uploadRenderData));
                        } //可以自行添加按钮关闭,关闭请清空rowData
                        ,
                    end: function () {
                        if (options.success) {
                            if (typeof options.success === 'function') {
                                options.success();
                            }
                        }
                    }
                });
            })
        } else {
            upload

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

现在的方法是在aliossUploader插件中在layui,upload.render方法中添加图片长宽比例的限制:

添加方法:

var beforeUploadFile = function (that,obj) {
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        if (JSON.stringify(filesss) == '{}') {
            filesss = JSON.parse(JSON.stringify(files));
            for (var file in files) {
                fileName = files[file].name;
            }
        } else {
            for (var file in files) {
                if (file in filesss) {
                    delete files[file];
                }
            }
            for (var file in files) {
                fileName = files[file].name;
            }
            filesss = JSON.parse(JSON.stringify(files));
        }

        //读取本地文件
        successCount = 0;
        //先获取police信息
        $.ajax({
            url: policyUrl,
            type: policyMethod,
            data: {
                fileName: fileName
            },
            headers: policyHeader,
            success: function (res) {
                var successStatus = false;
                if (codeFiled) {
                    if (res[codeFiled] == codeStatus) {
                        successStatus = true;
                    }
                } else {
                    successStatus = true;
                }
                if (successStatus) {
                    // 签名成功开始上传文件
                    res.data.signature = res.data[signatureFiled];
                    res.data.accessid = res.data[accessidFiled];
                    res.data.policy = res.data[policyFiled];
                    res.data.fileName = res.data['fileName'];
                    for (var filekey in files) {
                        that.uploadFile(files, filekey, 1, res.data);
                    }
                } else {
                    policyFailed(res);
                }

            },
            error: function (res) {
                policyFailed(res);
            }
        });
    }

修改方法upload.render:

        upload.render($.extend({
                elem: that.options.elm,
                url: httpStr + '://' + bucket + '.' + region + '.aliyuncs.com',
                accept: fileType,
                multiple: false,
                auto: false,
                choose: function (obj) {
                    layer.open({
                        type: 3,
                        icon: 1
                    });
                    var fileName;
                    if (proportion) {
                        obj.preview(function (index, file, result) {
                            let img = new Image();
                            img.src = result;
                            img.onload = function () { //初始化夹在完成后获取上传图片宽高,判断限制上传图片的大小。
                                if (img.width > img.height) { // 判断出最长边和最短边
                                    var chang = img.width;
                                    var duan = img.height;
                                } else {
                                    var chang = img.height;
                                    var duan = img.width;
                                }
                                let uploadProportion = (duan / chang).toFixed(2);
                                if (proportion == uploadProportion) {
                                    beforeUploadFile(that,obj);
                                } else {
                                    layer.closeAll('loading');
                                    layer.msg("上传图片宽高比例应为" + proportion);
                                }
                            }
                        });
                    } else {
                        beforeUploadFile(that,obj);

                    }

                }
            }, uploadRenderData));

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...