vue upload限制上传图片大小

页面

<el-col :span="6" class="center">
          <el-form-item label="上传近期免冠证件照" required>
            <el-upload
              class="avatar-uploader"
              style="width: 100%;"
              list-type="picture-card"
              :action="uploadUrl"
              :show-file-list="false"
              :auto-upload="false"
              accept=".jpg, .jpeg, .png, .JPG, .JPEG"
              :on-change="handlePhotoSuccess"
            >
              <img v-if="Photourlimg && Photourlimg != 'null'" :src="Photourlimg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">图片不超过200kb</div>
            </el-upload>
          </el-form-item>
        </el-col>

代码

  // 近期免冠证
      handlePhotoSuccess(file, fileList) {
     
        this.Photourlimg = file.url;
        const isLt = file.size / 1024 < 200;//判断是否小于200Kb
        if (!isLt) {
     
          this.msgError('近期免冠证件照大小不能超过 200KB!请重新上传');
          this.Photourlimg = '';
        } else {
     
          this.studentform.bareheadedPhotoLinkFile = file.raw;
        }
      },

vue upload限制上传图片大小_第1张图片

你可能感兴趣的:(vue,vue.js)