关于vue框架上传组件上传图片格式正确但在不同设备提示格式不正确问题

一、问题来源

上周客户反映系统上传图片，总是提示图片格式不正确，图片发过来，发现图片格式是 'jpeg', 'png', 'jpg'格式，并且我尝试上传了一次，并没有提示格式不正确。很是奇怪和纳闷。经远程发现，对方的图片格式是大写的，如：JPEG,PNG,JPG。然后我把自己的图片格式改成大写的，然后上传，发现的确提示格式不正确。然后个人斗胆猜想==>图片在经聊天软件传输的过程中，经一台设备到另一台设备，图片格式由大写转换成了小写，于是我是能够上传的，而客户是不可以的。

二、解决方案

方案一：

通过上传组件的便利，可以在上传前获取到图片的格式，不管是大写还是小写格式，统一转换成小写格式，代码如下：

 // 上传文件之前
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
      const whiteList = ['jpeg', 'png', 'jpg']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件格式不对')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB', 'error')
        return false
      }
    },

方案二：

 // 上传文件之前
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ['jpeg', 'png', 'jpg','JPEG', 'PNG', 'JPG']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件格式不对')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB', 'error')
        return false
      }
    },