element 上传图片限制图片尺寸大小以及格式，贴源码，写的很清楚，已优化

最新推荐文章于 2024-03-17 21:27:45 发布
最新推荐文章于 2024-03-17 21:27:45 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： 图片上传 element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43869524/article/details/86659498
版权 
<el-upload
            class="avatar-uploader"
            action="这里不需要填或者随便写"
            list-type="picture-card"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :http-request="beforeMasterPictureUpload"
            :on-change="onChangeMaster"
            :on-exceed="OnExceed"
            :file-list="fileList"
            :limit="1"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

上面是标签 下面是方法

下面是以前的旧方法，经过优化后可往后翻

// 主图上传成功
    handleMasterPictureSuccess(res, file) {
          this.dialogImageUrl = URL.createObjectURL(file.raw);
          console.log(this.dialogImageUrl)
          if (this.dialogImageUrl) {
            // this.$message('上传成功');
            this.$message({
          message: this.$t('Sellerbanner.Sellerbanner.Uploadsuccess'),
          type: 'success'
        });
          }
    },
    // 图片触发
    onChangeMaster(file, fileList){
        　let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
        　　if (existFile) {
                this.$utils.commonUtils.tip(this.$t('Sellerbanner.Sellerbanner.currentfile'),'error')
        　　　　fileList.pop()
        　　}
        　this.fileList = fileList
    },
    // 主图上传之前
    beforeMasterPictureUpload(file) {
      // console.log(file)
      let param = new FormData(); //创建form对象
      this.fileList.forEach(file => { 
            param.append('files', file.raw, file.raw.name); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上 
  　　}) 
      let config = {   //添加请求头
          headers:{'Content-Type':'multipart/form-data'}
      };
      // this.$api.generalize.uploading(param,config).then( res => {
      // const {data} = res;
      // this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
      // })

      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isname = new RegExp("[\u4E00-\u9FA5]+");
      if (isname.test(file.name)) {
        this.$message.error(this.$t('Sellerbanner.Sellerbanner.beChinese'));
            return false
          }
          let _this = this
          if (file.type.indexOf('image')<0) {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.isincorrect'));
            return false
          }
          if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error(this.$t('Sellerbanner.Sellerbanner.Uploadingimages'));
          }
      let a = this.bannerCur;
      switch(a){
        case '1':
        {
          if (this.bannerCur === '1') {
            this.isLt2M = file.size / 750 / 530 < 2;
            const isSize = new Promise(function(resolve, reject) {
            let width = 750;
            let height = 530;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
              if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            // const {data} = res;
            // this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
        case '2':
        {
          if (this.bannerCur === '2') {
            this.isLt2M = file.size / 220 / 170 < 2;
          const isSize = new Promise(function(resolve, reject) {
            let width = 220;
            let height = 170;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed1'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
        case '3':
        {
           if (this.bannerCur === '3') {
             this.isLt2M = file.size / 1180 / 140 < 2;
          const isSize = new Promise(function(resolve, reject) {
            let width = 1180;
            let height = 140;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed2'));
            return Promise.reject();
          });
          return isSize
           }
        }
        break;
        case '4':
        {
          if (this.bannerCur === '4') {
            this.isLt2M = file.size / 1190 / 240 < 2;
            const isSize = new Promise(function(resolve, reject) {
            let width = 1190;
            let height = 240;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = true || img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed3'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
        case '5':
        {
          if (this.bannerCur === '5') {
            this.isLt2M = file.size / 400 / 638 < 2;
          const isSize = new Promise(function(resolve, reject) {
            let width = 400;
            let height = 638;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed4'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
      }
      return (isJPG || isBMP || isGIF || isPNG) && this.isLt2M;
  },
  // 图片个数超出限制
  OnExceed(file, fileList) {
      this.$utils.commonUtils.tip(this.$t('Sellerbanner.Sellerbanner.uploadupto'),'error')
  },
  //删除图片
    handleRemove(file, fileList) {
      this.fileList = [];
      this.dialogImageUrl = '';
        // console.log(file, fileList);
    //     let config = {   //添加请求头
    //       headers:{'Content-Type':'application/json;charset=utf-8'}
    //     };
    //   let result = []
    //   const that = this;
    //   result.push(file.url)
    //   this.$api.generalize.deleteFileList(result,config).then( res => {
    //     if(res.errorCode == '100200'){
    //       this.fileList.forEach( (v,index) => {
    //           if(v.url == file.url) {
    //               that.fileList.splice(index,1);
    //           }
    //       })
    //       let resultA = []
    //       that.fileList.forEach( val => {
    //           resultA.push(val.url) 
    //       })
    //       that.dialogImageUrl =  resultA.join('|')

    //     }
    //     // console.log(res,'res删除图片')
    // })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

下面是优化后的方法

// 主图上传之前
    beforeAvatarUpload(file) {
      const idJPG =
        file.type === "image/jpeg" || "image/gif" || "image/png" || "image/bmp";
      if (!idJPG) {
        this.$message.error(
          this.$t("Sellerbanner.Sellerbanner.Uploadingimages")
        );
      }
      return idJPG;
    },
    beforeMasterPictureUpload(file) {
      console.log(this.fileList);
      let param = new FormData(); //创建form对象
      this.fileList.forEach(file => {
        param.append("files", file.raw, file.raw.name); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
      });
      param.append("type", 2);
      let config = {
        //添加请求头
        headers: { "Content-Type": "multipart/form-data" }
      };

      const isname = new RegExp("[\u4E00-\u9FA5]+");
      if (isname.test(file.name)) {
        this.$message.error(this.$t("Sellerbanner.Sellerbanner.beChinese"));
        return false;
      }
      let _this = this;
      // if (file.type.indexOf('image')<-1) {
      //   this.$message.error(this.$t('Sellerbanner.Sellerbanner.isincorrect'));
      //   return false
      // }

      param.append("type", 2);
      this.$api.system.minUpdateFileList(param, config).then(res => {
        if (res.errorCode == "100200") {
          const { data } = res;
          this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
          console.log(this.fileList);
          if (this.dialogImageUrl) {
            this.$message({
              message: "上传成功",
              type: "success"
            });
          } else {
            this.$message({
              message: "上传失败",
              type: "success"
            });
          }
        } else {
          this.$message({
            message: "上传失败",
            type: "success"
          });
        }
        // const {data} = res;
        // this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
      });
    },
     // 图片个数超出限制
    OnExceed(file, fileList) {
      this.$utils.commonUtils.tip(
        this.$t("Sellerbanner.Sellerbanner.uploadupto"),
        "error"
      );
    },
    //删除方法和旧方法一样，或者你只管往数据库堆，在这里你只需要清空数组就好
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
永远的个初学者
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Element 图片上传封装图片质量压缩上传
10-12
项目中使用 element组件，而其图片上传组件无法达到实现图片质量压缩的需求，需要再次封装，可以对上传的较大的图片质量进行压缩处理等；部分代码，仅供参考使用！
基于Element-UI 的二次封装图片上传组件
最新发布
05-06
1、包含上传图片，pdf大小校验。 2、上传数量限制。 3、上传进度条。 4、可触发Form表单校验，使用方法与其他表单元素一致 5、大图预览功能 父组件直接使用 v-model 绑定图片上传组件。
vue,elementUI组件库的文件上传组件的照片墙怎么调整大小
qq_66107576的博客
08-02 626
修改文件上传的照片墙大小,代码直接复制即可
element-ui 上传图片后清空图片显示的实例
10-18
今天小编就为大家分享一篇element-ui 上传图片后清空图片显示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于＜el-image＞预览图片设置图片的大小
weixin_44495327的博客
03-17 726
没有设置预览图片大小的时候 图片是全屏的 看起来及其的压抑 个人感觉！通过这样设置 也不会影响到缩放的功能。首先放上 引用的片段代码。设置预览之后的图片大小。
Vue+Element ui上传图片限制图片尺寸
FrankJiang
05-10 1931
1.引入element-ui upload组件 <el-upload class="avatar-uploader" :headers="myHeaders" :action="上传图片的地址" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar".
element Upload 上传之自定义上传的长度后隐藏上传按钮以及样式穿透
ZW005499的博客
06-09 1027
Upload 上传之自定义上传的长度后隐藏上传按钮以及样式穿透
vue3 ts element-plus上传图片限制大小 尺寸 格式
weixin_48329823的博客
08-04 2589
vue3 ts element-plus上传图片限制大小 尺寸 格式
若依图片上传到服务器，前端显示图片
m0_64251904的博客
10-19 5340
【代码】若依图片上传到服务器，前端显示图片。
element-ui, upload组件的显示与隐藏以及图片大小的控制
weixin_47711284的博客
05-28 4552
需求 要求：上传图片不超过五张，每张图片不超过20M，达到五张限制后自动隐藏上传组件 实现 HTML代码： 关键代码 :class="{‘hide’:hideUploadAdd}"，这个是样式控制 <el-upload action=" " list-type="picture-card" multiple :limit="5" :file-list="file
ElementUI图片上传 缩略图 picture-card 数量限制
Sunshine_Jian的博客
11-09 1996
ElementUI图片上传 缩略图 picture-card 数量限制，问题描述：在图片上传列表中，需要对图片上传的个数进行限制，在增加图片到最大数量限制时，就将上传框隐藏掉；在删除后，就再次显示出来；如果仅仅用 limit 是 可以实现功能的，但是会在后面发现下图最后面的框，还能选取文件，只是上传不了；
vue+elementui el-upload 图片类型，大小，尺寸限制
m0_49881056的博客
06-29 2890
2.在api文件引用接口。
element 图片上传限制尺寸大小（像素）
canyi8023的博客
09-17 2893
今天刚接了一个新需求，上传图片需要限制图片的宽高，容差在是像素。 这块是上传的大小不合适就提示：请准确上传广告图，像素要求是380px*100px，1200px*158px，所以我就直接写死了。 看下我上传图像的尺寸： 具体代码如下： <el-upload class="heightCredential" :action="action" :file-list="list" :show-file-list="isList" :on-succes..
Vue+Element-UI实现上传图片并压缩
10-15
主要为大家详细介绍了Vue+Element-UI实现上传图片并压缩功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE 实现element upload上传图片到阿里云
10-14
主要介绍了VUE 实现element upload上传图片到阿里云，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui Form表单验证规则全解
热门推荐
qq_30944053的博客
01-24 2万+
element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑 之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末   1. 普通输入验证 &lt;el-form-item label="活...
vue elementui 上传图片限制格式、大小和尺寸
qq_58340302的博客
07-22 7759
图片上传的尺寸限制
ElementUI大小改变
huiguo_的博客
04-25 2784
一定要有 /deep/ ~~~ /deep/ .el-upload--picture-card{ width: 100px; height: 100px; } /deep/ .el-upload{ width: 100px; height: 100px; ...
vue+element 上传
你好！刘斩仙
04-07 229
单个上传： 效果如图： html: <el-form :model="newTeam" status-icon :rules="newTeamRules" ref="newTeam" label-width="120px"> <el-Row> <el-form-item label="上传头像：" prop="headUrl" size="small" :...
Element plus实现图片上传时限制只能上传一个拖
06-03
拽或选择的文件，该怎么做呢？ 在 Element Plus 中实现图片上传时，可以通过设置 `limit` 属性为 `1` 来限制只能上传一个文件。同时，还需要设置 `multiple` 属性为 `false`，禁止多选文件。下面是一个示例代码： ```html <el-upload class="avatar-uploader" action="/upload" :show-file-list="false" :limit="1" :multiple="false"> <template #default> <div class="avatar-container"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </div> </template> </el-upload> ``` 在上述代码中，`limit` 属性被设置为 `1`，表示只能上传一个文件。同时，`multiple` 属性被设置为 `false`，禁止多选文件。这样就可以实现只能上传一个拖拽或选择的文件的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值