從異步 function 獲取 boolean 值，然后驗證 IF ELSE 條件

Question

這是代碼片段。 在這里，我想檢查圖像的寬度或高度是否超過 100，我想返回 true 以便我可以限制將此類文件/圖像上傳到數組。

const getHeightWidth = async () => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    await reader.addEventListener('load', async (e) => {
        const image = new Image();
        image.src = reader.result;
        await image.addEventListener('load', function () {
            const { height, width } = this;
            invalidFileHeightWidth = !!((height !== 100 || width !== 100));
            return invalidFileHeightWidth;
        });
    });
};

我嘗試了 Promise.resolve 以及直接返回語句，但到目前為止沒有運氣

Answer 1

我會把它分成五個獨立的功能：

1. loadImageFromFile ~ Promise使用FileReader按filename加載
2. loadImage ~ 一個Promise設置Image object 的src
3. loadImageFromFile ~ 將以上兩個函數合並為一個調用
4. isValidSize ~ 驗證給定圖像的寬度/高度
5. previewFile ~ 用於偵聽文件輸入的事件處理程序

 const previewFile = async () => { const preview = document.querySelector('img'); const file = document.querySelector('input[type=file]').files[0]; const image = await loadImageFromFile(file); const isValid = isValidSize(image); console.log(`Image size valid: ${isValid }`); preview.src = image.src; // Update preview }; const loadImageFromFile = async (file) => { const reader = await readFile(file); return loadImage(reader.result); }; const readFile = async (file) => new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.addEventListener('load', (e) => resolve(fileReader)); fileReader.addEventListener('error', (e) => reject(e)); }); const loadImage = async (imageData) => new Promise((resolve, reject) => { const image = new Image(); image.src = imageData; image.addEventListener('load', function (e) { resolve(this); }); image.addEventListener('error', function (e) { reject(e); }); }); const isValidSize = (image) => { const { height, width } = image; return width === 100 && height === 100; };

 <input type="file" onchange="previewFile()" /><br /> <img src="" height="100" alt="Image preview" />

如果你想要一個巨型單片function，你可以嘗試：

注意：您使用它來僅檢查圖像是否有效。 如果您想對圖像執行更多操作，則需要再次加載圖像。 這就是為什么第一個例子是更好的選擇。 它將驗證與加載分開。

 const preview = document.querySelector('img'); const previewFile = async () => { const preview = document.querySelector('img'); const file = document.querySelector('input[type=file]').files[0]; const isValid = await isValidSize(file); console.log(`Image size valid: ${isValid }`); }; const isValidSize = async (file, expectedWidth = 100, expectedHeight = 100) => new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.addEventListener('load', (e) => { const image = new Image(); image.src = fileReader.result; image.addEventListener('load', function (e) { const { height, width } = this; resolve(width === expectedWidth && height === expectedHeight); }); image.addEventListener('error', function (e) { reject(false); }); preview.src = image.src; // This is now coupled... }); fileReader.addEventListener('error', (e) => reject(false)); });

 <input type="file" onchange="previewFile()" /><br /> <img src="" height="100" alt="Image preview" />

Answer 2

如果您想使用async / await ，您需要將事件包裝在Promise構造函數中。

下面是一個簡單的工作示例，select 一個圖像文件，它會給你大小。

 function getFileSize(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = e => { const image = new Image(); image.onload = e => resolve([image.width, image.height]); image.onerror = e => reject(e); image.src = reader.result; } reader.onerror = e => reject(e); reader.readAsDataURL(file); }); } document.querySelector('input').addEventListener('change', async e => { const span = document.querySelectorAll('span'); const size = await getFileSize(e.target.files[0]); span[0].innerText = size[0]; span[1].innerText = size[1]; });

 span { font-weight: bold; }

 <input type="file" accept="image/png, image/gif, image/jpeg"/> <div>width: <span></span></div> <div>height: <span></span></div>