如何检测上传的图片是否有效

起因

最近有个朋友找到我，让我改个功能，功能是这样的，有个app页面要拍照上传图片到第三方图片平台，然后把返回的url以及其他信息提交给后端接口，但是用户在使用的时候出现了拍照上传成功，但是刷新页面后获取到的后端的信息中图片显示的是失败的

给出的解决办法

我要做的就是判断上传到图片平台后返回的链接图片是否有效，有效的话就提示上传成功，若是无效则提示第几张图片有问题，并让其重新上传

解决思路

如何判断一个图片是否是正常图片呢？

判断图片链接是否有效，我们首先创建一个Image对象，然后把链接设置在Image对象上，如果能正常加载，则代表链接有效,否则就是无效的链接;

function checkImgURL(imgurl) {
    return new Promise(function(resolve, reject) {
      var ImgObj = new Image()
      ImgObj.src = imgurl
      ImgObj.onload = function(res) {
        resolve(true)
      }
      ImgObj.onerror = function(err) {
        reject(false)
      }
    })
} 

有了上面的函数判断之后那么我下面需要处理的逻辑就是这样了： 根据上面函数的返回结果去判断图片链接数据是否那什么错误，我一想这不是挺简单的吗，于是就这样写

async function dealUploadImg() {
    let errorIndex = []
    let imgData = [
        { url: 'http://p6-passport.byteacctimg.com/img/mosaic-legacy/3793/3114521287~300x300.image', mark: 0 },
        { url: 'http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/inprocess.d75949b.png', mark: 0 },
        { url: 'http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/inprocess.png', mark: 0 }
    ]
    for (let i in imgData) {
        let res = await checkImgURL(imgData[i].url)
        if (!res) {
            errorIndex.push(i + 1)
        }
    }
    if (errorIndex.length) {
        let imgIndex = errorIndex.join(",")
        console.log('第' + imgIndex + '张图片有问题，请重新上传')
    } else {
        console.log("上传成功！")
        // 下面开始执行成功后的操作逻辑
    }

}
dealUploadImg()

本以为到这里就大功告成了，一测试，结果。。。控制台报错了？不可置信，报错原因是 # ReferenceError: Promise is not define 我一看这个错误明显是js兼容性问题呀，promise在项目中不能识别。

我给朋友改的这个项目也是一个老项目，里面掺杂了jq，vue.js的外链引入等，我仅仅是来改一个bug的，难道要为了这个bug还要去做一个js兼容吗？不知道其他小伙伴会不会这样做，反正我肯定是不会这样做的，那么还有没有其他不使用promise的方法能实现这个功能吗？肯定是有的，接下来我就不用promise再修改下；

非promise情况下的图片判断

function checkImgURL(imgurl,callback) { 
      var ImgObj = new Image()
      ImgObj.src = imgurl
      ImgObj.onload = function(res) {
        callback(true)
      }
      ImgObj.onerror = function(err) {
        callback(false)
      } 
} 

function dealUploadImg() {
    let imgData = [        { url: 'http://p6-passport.byteacctimg.com/img/mosaic-legacy/3793/3114521287~300x300.image', mark: 0 },        { url: 'http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/inprocess.d75949b.png', mark: 0 },        { url: 'http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/inprocess.png', mark: 0 }    ]
    function cb(imgs, imgRes = []) {
        if (imgs.length) {
            let shiftImg = imgs.shift()
            checkImgURL(shiftImg.url, (res) => {
                imgRes.push(res)
                cb(imgs, imgRes)
            })
        } else {
            let errIndex = []
            imgRes.forEach((i, index) => {
                if (!i) {
                    errIndex.push(index + 1)
                }
            })
            if (errIndex.length) {
                let imgIndex = errIndex.join(",")
                console.log('第' + imgIndex + '张图片有问题，请重新上传')
            } else {
                console.log("上传成功！")
                // 下面开始执行成功后的操作逻辑
            }
        }
    }
    let imgsCopy = [...imgData]
    cb(imgsCopy)
}
dealUploadImg()

至此，检测上传图片是否有效的功能大概思路也算是完成了（上述是简版），在代码的修改上经过测试也符合朋友的需求，哈哈哈~

参考链接：

zhuanlan.zhihu.com/p/166439163