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

    },

巴特西

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

效果：

代码：

css : 隐藏上传的 + 号

变量：

方法：

最新文章

热门文章