嵌套的条件语句逻辑是错误的？

Question

我正在尝试对我的文件上传进行一些验证我正在检查3件事

1）文件已提交？ 2）文件类型是否正确？ 3）文件大小小于允许的数量

由于一些奇怪的原因，我的嵌套条件语句没有返回我期望它们。

我希望它像：

如果用户输入文件，请检查文件类型。如果文件类型通过，请检查文件大小，如果文件大小通过，则将文件提交给服务器。

当我在控制台中测试时，如果我没有提交文件，则第一个if块传递但第二个失败，当我同时提交正确的文件类型和错误的文件类型时。另外，我检查了文件大小块，但两种情况都失败了。

这是我的代码和我在控制台上的输出。对于文件类型，我已经设置了真实文件类型的状态，以防用户试图欺骗文件。

    async onSubmit(e){
        e.preventDefault();

        console.log(this.state);

        // file size bytes in mb
        var fileCheck = Math.floor(Math.log(this.state.fileSize) / Math.log(1024));

        console.log(fileCheck);

        //Check if a uploaded photo was taken.
        if(this.state.fileObject === ''){
            console.log('no file was submitted');
        } else if(this.state.fileType !== 'image/jpeg' || this.state.fileType !== 'image/jpg' || this.state.fileType != 'image/png'){
            // check file type
            console.log('wrong file type');
        } else if(fileCheck >= 2){
            // check file size
            console.log('file is too big');
        }
        else {
            console.log('passed all file checks');
        }
    }

控制台输出：

Answer 1

此处的第二项测试将始终评估为真：

else if(this.state.fileType !== 'image/jpeg' || this.state.fileType !== 'image/jpg' || this.state.fileType != 'image/png'){

我建议改为检查数组：

const allowedFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
// ...
else if (!allowedFileTypes.includes(this.state.fileType)) {
  // err, condition failed
}

.includes是一种半近期的方法，如果您支持古代浏览器并且不使用polyfill，请改为对indexOf进行测试：

const allowedFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
// ...
else if (allowedFileTypes.indexOf(this.state.fileType) === -1) {
  // err, condition failed
}