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

最新推荐文章于 2024-07-11 08:30:00 发布

永远的个初学者

最新推荐文章于 2024-07-11 08:30:00 发布

阅读量2.6k

点赞数 1

分类专栏：图片上传 element

本文链接：https://blog.youkuaiyun.com/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 =&#