美文网首页
表单校验上传图片格式

表单校验上传图片格式

作者: 八妹sss | 来源:发表于2021-03-19 13:55 被阅读0次

    1、html限制

    <!--所有格式的图片-->
    <input type="file" accept="image/*" />
    <!--指定图片格式-->
    <input  type="file" accept="image/png,image/jpg,image/jpeg" />
    

    2、js限制

    // 所有格式的图片
    uploadImg (data) {
          let file = data.file
          if (!/^image\//.test(file.type)) {
            return this.$message({
              message: '请上传图片格式文件',
              type: 'warning'
            })
          }
          let size = Math.floor(file.size / 1024)
          if (size > 1024 * 5) {
            this.$message({
              message: '建议使用5MB以内的图片',
              type: 'warning'
            })
            return false
          }
     }
    // 部分格式图片
    uploadImg (data) {
          let file = data.file
          if (!/\.jpg|\.jpeg$|\.png$/i.test(file.name)) {
            return this.$message({
              message: '建议使用jpg、png格式的图片',
              type: 'warning'
            })
          }
          let size = Math.floor(file.size / 1024)
          if (size > 1024 * 5) {
            return this.$message({
              message: '建议使用5MB以内的图片',
              type: 'warning'
            })
          }
     }
    

    相关文章

      网友评论

          本文标题:表单校验上传图片格式

          本文链接:https://www.haomeiwen.com/subject/mwmvcltx.html