时间戳

首页 > 解决方案 > 无法在上传之前为图像大小验证及其不同类型格式添加警报通知我们如何实现

javascript - 无法在上传之前为图像大小验证及其不同类型格式添加警报通知我们如何实现

问题描述

代码沙箱： https ://codesandbox.io/s/quizzical-lamport-ql5ep

我正面临这个问题。我附上了代码 CodeSandbox 链接。 图片 试图以各种方法和方式解决问题，但没有解决。我不知道为什么会出现错误我不明白代码中的确切问题。任何人都可以帮助解决问题吗？

无法在上传之前为图像尺寸验证及其不同类型格式添加警报通知我们如何实现尺寸 <5mb 和文件格式 jpeg/png。警报通知不起作用

还尝试了这种方法，它无法上传图片 jpeg，例如最大 2-3mb 大小。

 const isSupported = (file) => {
    let type = file?.type.split("/")[1];
    let allowedTypes = ["png", "jpg", "jpeg"];
    return allowedTypes.includes(type);
  };

  const ValidateSize = (file) => {
    var FileSize = file.files[0].size / 1024 / 1024; // in MiB
    const overSize = FileSize > 5;
    if (overSize) {
      alert("File size exceeds above 5MB");
    }
    return overSize;
  };

  const handleFileChange = (e) => {
    if (ValidateSize(e.target)) {
    return;
    }

    if (isSupported(e.target.files[0])) {
      window.URL = window.URL || window.webkitURL;
      const mimeType = e.target.files[0].type;
      let url = window.URL.createObjectURL(e.target.files[0]);
      alert("Only jpg/jpeg and png files are allowed!");
    }
  };

标签： javascriptnode.jsreactjstypescriptredux

解决方案

这里我有一个代码片段，我首先进行文件类型验证而不是文件大小，希望它会有所帮助

Filevalidation = () => {
    //getting the file input
    const fi = document.getElementById('image');
    const img = fi.value.split('.').pop().toLowerCase().toString();
    var imageExts = ['jpg', 'jpeg'];
    // Check if any file is selected. 
    if (fi.files.length > 0) {
        console.log(img)
        if (imageExts.indexOf(img) === -1) {
            alert('Only jpg/jpeg and png files are allowed!');
        } if (imageExts.indexOf(img) !== -1) {

            let i;
            for (i = 0; i <= fi.files.length; i++) {

                const fsize = fi.files.item(i).size;
                const file = Math.round((fsize / 1024));
                // The size of the file.
                if (file >= 5120) {
                    alert('One or more files are bigger than 5mb');

                } if (file < 5120) {
                    //upload file/s
                }
            }
        }
    }
}

推荐阅读