elm上传图片，只能上传一张，隐藏+上传框

效果：

 上传后，隐藏+号，禁止继续上传；

 移除当前已上传的后，重新显示+号，可以继续上传；

 

 

 

 

  

代码：

 

 

css : 隐藏上传的 + 号

 

变量：

注：

利用 hideUpload 控制 + 号的css

 

pngFilesList 为图片默认列表，（用于编辑时回显图片）

 

 

 方法：

　　// 上传成功时，让+号隐藏，不能再继续上传
　　pngUpSuccess (response, file, fileList) {
      this.ruleForm.pngUrl = response.data.path
      this.hideUpload = true
      this.$store.dispatch('setLoading', false)
    },
    pngUpError (file, fileList) {
      this.$store.dispatch('setLoading', false)
    },
　　// 上传前限制类型和大小
    pngBeforeUpload (file) {
      this.$store.dispatch('setLoading', true)
      const isPNG = file.type === 'image/png'
      const isJPG = file.type === 'image/jpeg'
      const isJPEG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPNG && !isJPG && !isJPEG) {
        this.$message({
          message: '不接受此文件类型！',
          type: 'error',
          showClose: true
        })
        this.$refs.uploadpng.clearFiles()
        this.$store.dispatch('setLoading', false)
        return false
      }
      if (!isLt2M) {
        this.$message({
          message: '图片大小不能超过2M',
          type: 'error',
          showClose: true
        })
        this.$refs.uploadpng.clearFiles()
        this.$store.dispatch('setLoading', false)
        return false
      }
    },
　　 // 移除文件后重新让 + 号 显示
    pngonRemove () {
      this.ruleForm.pngUrl = ''
      this.hideUpload = false
    },