未处理的拒绝（错误）：给定的文件不是图像

Question

• 这里我在react js中使用formik上传文件

• 上传文件时，它的大小验证有效，但类型验证不起作用

• 这是我的代码 如果有人能帮助我，那对我来说真的很有帮助

   const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg","image/png"];
  
  const onFileChange = async (文件) => { 
   const 选项 = {maxSizeMB: 1, maxWidthOrHeight: 500, useWebWorker: true} 
  
   constcompressedFile =等待imageCompression（文件，选项）
     console.log(`------- 压缩文件大小 ${compressedFile.size / 1024} KB -------`)
  
     var formData = new FormData()
     formData.append('文件', 压缩文件)
     var url = URL.BASE + URL.STORAGE_UPLOAD + 'profileImage'
    var result = wait post(url, formData, '多部分/表单数据')
  
    if (result.is_success === false) {
        addNotification(result.error_message, '危险');
      }
  
     别的{      
     var url= reader.readAsDataURL(文件)
     reader.readAsDataURL(文件)
  
      reader.onloadend = 函数 (e) {
      setSelectedImgUrl(reader.result);
        setProfileImage(结果.数据.文件名);    
     }
     .bind(这个)
  } }
  
  
  
    profileImgUrl: 是的
           .mixed()
          .nu​​llable() 
          .notRequired()      
           。测试（
                   “文件大小”，
                   requiredMessages.file_size_validation，
                    （文件）=> !文件 || (文件 && file.size <= 2000000)
                ）      
           。测试（
                   “文件格式”，
                   requiredMessages.file_type_validation，
                   （文件）=> !文件 || (文件 && SUPPORTED_FORMATS.includes(file.type))
               ),
  
  
  
    `
  

Answer 1

您可以在选项声明中设置最大大小。您没有设置允许的类型。

 const options = {maxSizeMB: 1, maxWidthOrHeight: 500, useWebWorker: true} 

试试这个（会仔细检查它是 .jpg 还是 jpg，因为我不记得语法了）：

const filesFormats = [".jpg", ".gif"];
const isRightFormat = filesFormats.includes(file.type);

Answer 2

就我而言，解决方案是将 File.type 显式设置为“image/jpeg”