element-ui upload文件上传

 <el-form-item
        label="赛事icon"
        prop="league_icon">
        <el-upload
          class="upload-demo"
          action="#"
          :multiple="false"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          :file-list="fileList"
          :limit="2"
          :on-change="handleChange"
          accept=".png, .jpg, .JPG, .JPEG, .jpeg, .PNG .GIF, .gif"
          :auto-upload="false"
          ref="upload">
          <el-button
            slot="trigger"
            size="small"
            type="primary">
            选取文件
          </el-button>
          <div
            slot="tip"
            class="el-upload__tip">
            只能上传jpg/png文件,且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
 data() {
      return {
        fileList: []
      }
 }

 methods: {
    beforeAvatarUpload(file) {
        const fileType = file.raw.type;
        const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType ===             'image/png';
        const isLt20M = file.raw.size / 1024 / 1024 < 20;
        if (!isJPG) {
          this.$message.error('上传图片的格式只能是 JPG或PNG 格式!');
        }
        if (!isLt20M) {
          this.$message.error('上传图片的大小不能超过 20M!');
        }
        return isJPG && isLt20M;
      },
     handleRemove(file) {
        const index = this.fileList.indexOf(file.url);
        this.fileList.splice(index, 1);
      },
      /**
       * 上传图片
       * @param {Object} file 文件对象
       * @param {string} fileList 文件列表
       * @return {void} 空
       */
     handleChange(file, fileList) {
        const isFileType = this.beforeAvatarUpload(file);
        // 如果文件类型不对,则清空表单及附件列表
        if (!isFileType) {
          this.fileList = [];
          return;
        }
        if (fileList.length > 1) {
          fileList.shift();
        }
        this.fileList = fileList;
      },
     async submitForm() {
        const formData = new FormData();
        if (this.fileList.length > 0) {
          formData.append('file', this.fileList[0].raw);
        }
        const result = await this.$http.post(httpUrlList.createLeagues, formData);
        console.log(result);
        if (result.data) {
          this.$message.success('success');
          setTimeout(() => {
            this.$router.push({ name: 'competitionSeason' });
          }, 1000);
        }
      },
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值