element-ui的upload 上传组件 照片墙当超过限定图片后隐藏上传按钮

隐藏上传组件。比如我想限制上传5张 ,上传到第五张后,上传组件隐藏,


 


然后在data
export default {
  name: '',
  data () {
    return {
      hideUpload: false,
    }
    }
    }
 methods: {
   handleEditChange (file, fileList) {
      this.hideUploadEdit = fileList.length >= 5
    },
    handleRemove (file, fileList) {
      if (fileList.length === 0) {
        this.fileList = []
      } else {
        let dl = this.fileList.indexOf(file)
        this.fileList.splice(dl, 1)
      }
      this.hideUploadEdit = fileList.length >= 5
    },
    handlePictureCardPreview (file) {
      this.curAskedDetail.asked_imgs = file.data
      this.fileList.push({ url: file.data })
    },
    uploadEdit (file) {
      return this.xianZhi(file)
    },
    uploadAdd (file) {
      return this.xianZhi(file)
    },
    xianZhi (file) {
      const isLimit = file.size / 1024 / 1024 <= 5
      if (
        ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].indexOf(
          file.type
        ) === -1
      ) {
        this.$message.error('上传图片只能是 jpg/jpeg/gif/png格式!')
        return false
      }
      if (!isLimit) {
        this.$message.error('上传图片大小不能超过" + 5 + "MB!')
        return false
      }
    }
}




注意,必须去掉scoped,不然不生效

你可能感兴趣的:(vue)