前端输入一个url，而后判断该路径是否是一个图片

最新推荐文章于 2024-07-26 03:10:54 发布

炫彩无敌爆炸小仙女

最新推荐文章于 2024-07-26 03:10:54 发布

阅读量1.4k

点赞数

分类专栏： h5 js 文章标签： typescript javascript

本文链接：https://blog.csdn.net/weixin_44118883/article/details/105636290

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

之前在做以图搜图功能，除了传图片还有传路径的，所以前端先判断一下该路径是不是一个图片，再传给后端，后端直接保存图片就可以了。
上代码

var ImgObj = new Image()
      ImgObj.src = imgurl 
      ImgObj.onerror = ()=>{
        this.$message.error(`图片地址错误`)
      }
      ImgObj.onload =  () =>{

        if (ImgObj.width > 0 && ImgObj.height > 0) {
        //成功后的操作
          this.onPost(imgurl)
        } else {  
          this.$message.error(`图片地址错误`)
        } 
      }

onload函数需要时间，图片加载完成后执行，所以直接把后续操作if判断里面
onerror函数是为了图片加载过程中有异常发生，这样的话onload函数就不会执行，比如你属如的是一些胡乱的字符，1111或者www.baidu.com一类的。