element-ui限制一张图片上传

需求描述：在做图片上传组件的时候 有时候需求回要求只能上传一张图片
bug：element-ui在上传完一张图片后上传按钮还会存在 虽然可以用自带的limt属性加以限制 但是上传按钮依然会存在 且存入数组的值依然会增加

解决：可以判断上传后数组的length来控制图片上传的样式 让其上传一张后隐藏上传按钮 达到控制图片上传的数量需求

<el-form-item label="礼包主图" prop="goodsimage" :required="true">
        <el-upload
          :class="{ disabled: uploadDisabled }"   //这里动态控制样式
          :limit="1"
          ref="picUpload"
          class="pic-div"
          action="'xxxxxxx'"
          :with-credentials="true"
          list-type="picture-card"
          :on-remove="removePic"
          :on-change="handleEditChange"
          :file-list="goodsimage"
          :on-exceed="beyond"
        >
          <div class="el-upload file-upload-container" @click.stop="popFileUpload('0')">
            <i class="el-icon-plus"></i>
          </div>
        </el-upload>
      </el-form-item>

 // 隐藏图片上传按钮
    uploadDisabled() {
      return this.goodsimage.length > 0   //判断图片上传的数量动态控制按钮隐藏与显示
    },

<style>
.disabled .el-upload--picture-card {
  display: none;
}
</style>

最终效果

礼包视频也是如此要求仅限上传1个视频 由于是button按钮 俺就直接使用v-if判断视频的length来控制视频上传按钮的显示与隐藏

<el-button ***v-if="this.goodsvideo.length < 1"*** class="file-upload-btn-container" @click.stop="popFileUpload('1')" size="small" type="primary">点击上传</el-button >

上传视频后按钮隐藏

em…