脚本宝典收集整理的这篇文章主要介绍了

vue+Element Ui 实现自动上传图片

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

点击上传文件按钮 beforeAvatarUpload方法自动上传1到多个图片

<el-upload
        class="upload-demo"
        ref="upload"
        accept=".jpg"
        multiple
        :data="radio"
        :action="actionUrl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
         list-type="picture"
        :file-list="fileList"
        :before-upload="beforeAvatarUpload">
   <el-button slot="trigger" size="small"  :disabled="btnFlag" type="primary">上传文件</el-button>   
</el-upload>
    

**//上传画稿之前先判断画稿规格 再插oracle 再post到php
//为了解决onload异步使用promise**

beforeAvatarUpload:function(file) {
    var _this = this;
    return new Promise(function(resolve, reject) { //为了解决onload异步使用promise
        if(file.name.length > 100){
            _this.$alert(file.name+'图片名称字符长度超过100,不能上传!', '提示', {confirmButtonText: '确定'});
            reject();
            return;
        }
        var reader = new FileReader();
        var img_oracleFlag = false;
        reader.onload = function(event) { //onload是异步的
            var image = new Image();
            image.onload = function () {
                var width = this.width;
                var height = this.height;
                if (width>height && vm.radio.GGH=="小牌"){
                    _this.$alert(file.name+'不能上传!', '提示', {confirmButtonText: '确定'});
                    reject();
                    return;
                }else if (width<height && vm.radio.GGH=="大牌"){
                    _this.$alert(file.name+'不能上传!', '提示', {confirmButtonText: '确定'});
                    reject();
                    return;
                }else{
                    img_oracleFlag = true;
                    //插入oracle
                    $.ajax({ //必须使用同步ajax
                        url : OracleInterface,
                        type : 'post',
                        dataType : 'json',
                        async:false,
                        data : {},
                        success : function(res) {},
                        error : function(data) {},
                    })
                }
                resolve();
            };             
            image.src = event.target.result;
        }
        reader.readAsDataURL(file);
    });

    return true
},

总结

以上是脚本宝典为你收集整理的

vue+Element Ui 实现自动上传图片

全部内容,希望文章能够帮你解决

vue+Element Ui 实现自动上传图片

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过