资讯专栏INFORMATION COLUMN

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

hufeng / 617人阅读

摘要:点击上传文件按钮方法自动上传到多个图片上传文件上传画稿之前先判断画稿规格再插再到为了解决异步使用为了解决异步使用图片名称字符长度超过不能上传提示确定是异步的小牌不能上传提示确定大牌不能上传提示确定插入必须使用同步

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


   上传文件   

    

**//上传画稿之前先判断画稿规格 再插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           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108523.html

相关文章

  • Element-ui实现合并多图上传(一次请求多张图片

    摘要:实现多图上传主要用到以下两个属性是自带多图上传的,但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入,有截图可以看出,实质是进行多次请求在上传事件触发后,多图上传的默认实现调用了三次请求。 前言 工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家。 环境: Springboot+Vue+Element-ui 正文 这次上传使用的是Elem...

    loostudy 评论0 收藏0
  • 前端小姿势

    摘要:文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章,这种比较多以为例子先简单介绍 文章包含学习中遇到的问题 小白水平 可能会包含一些错误 或者还没写完... 或者非最佳实践 仅供参考 1.父子组件的v-model 参考vue官方文档...

    JeOam 评论0 收藏0
  • 前端小姿势

    摘要:文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章,这种比较多以为例子先简单介绍 文章包含学习中遇到的问题 小白水平 可能会包含一些错误 或者还没写完... 或者非最佳实践 仅供参考 1.父子组件的v-model 参考vue官方文档...

    liaosilzu2007 评论0 收藏0
  • 前端小姿势

    摘要:文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章,这种比较多以为例子先简单介绍 文章包含学习中遇到的问题 小白水平 可能会包含一些错误 或者还没写完... 或者非最佳实践 仅供参考 1.父子组件的v-model 参考vue官方文档...

    LeexMuller 评论0 收藏0
  • 步步向前之Element-UI

    摘要:无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字,同时有名为的,并无小图标,后边中括号结构里只能有一个有待考证。 Table 固定表头 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。例如: ... 这里文档只给了一种固定高度250px的解决方案,实际应用大多数是需要自适应占满父元素,超出滚动固定表头的...

    Imfan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<