在javascript或vue探测文件是否存在

在https://www.cnblogs.com/insus/p/22982421链接随笔中，Insus.NET有分享了一个判断文件是否存在的方法。

此本次，对那个方法进行另写，前一个方法，以array传作检测，如今改为直接传入单文件路径来判断。可以参考下面简单的代码，
2026-09-16_04-26-42

 
 const checkFileExist = async (url) => {
     try {
         const res = await fetch(url, {
             method: 'GET',
             headers: { Range: 'bytes=0-0' },  // 只要第一个字节
             cache: 'no-store',
         })
         return res.ok
     } catch {
         return false
     }
 };
View Code

 

如何调用？

 const url = '/temp/' + item.ImageFileName;
 if (!item.ImageFileName && await checkFileExist(url)) {
     iframe.src = url;
 } else {
     //文档不存在或被删除。
 }


或者，把判断分开写，

if (!item.ImageFileName) {                       
    return;
}

const url = '/temp/' + item.ImageFileName;
const exists = await checkFileExist(url);

if (exists) {
    iframe.src = url;
} else {
    //文档不存在或被删除。
}


异步方法，在调用时，需要使用await不然得到的结果永远为true，因为Promise 是 truthy 的，所以这个条件永远为真。

借本篇篇辐，对“ 文档不存在或被删除。”进行重构，让其优雅一点。

还一点需要重构的，就是每张图片之间切换点击查看时，留在iframe的历史影像需要预先清除。

2026-09-16_05-01-20

 

// 现成的"文档不存在"提示页
function showEmptyMessage(iframe, text = '文档不存在或被删除') {
    showInIframe(iframe, `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body style="margin:0;height:100vh;display:flex;align-items:center;justify-content:center;
                 color:#999;font-family:system-ui,-apple-system,sans-serif;background:#fafafa;">
        ${text}
    </body>
    </html>
    `);
}
View Code

 

写成html并嵌入其中。显示真实的text你是可以赋值的。

 // 在 iframe 里显示提示文字
 function showInIframe(iframe, html) {
     iframe.removeAttribute('src');      // 先清掉 src，避免它覆盖 srcdoc，清理遗留。
     iframe.srcdoc = html;
 }

 

// 清空 iframe（比如切换文件或图片查看时）
function clearIframe(iframe) {
    iframe.removeAttribute('srcdoc');
    iframe.src = 'about:blank';
}

 

完整的onView事件，
2026-09-16_05-16-28

 

const onView = async (item) => {
    const iframe = document.getElementById('frameContainer');
    if (!iframe) return;

    loading.value = true;
    error.value = '';

    try {
        // 1. 没有文件名，直接提示
        if (!item.ImageFileName) {
            showEmptyMessage(iframe);  //以前是没有文件名null时，直接return。现在显示上面写的showEmptyMessage(...)方法。
            return;
        }

        const url = '/temp/' + item.ImageFileName;

        // 2. 探测文件是否存在
        const exists = await checkFileExist(url);

        if (exists) {
            iframe.removeAttribute('srcdoc');   // 清掉上一次可能的 srcdoc
            iframe.src = url;
        } else {
            showEmptyMessage(iframe);  
        }
    } catch (err) {
        error.value = '查看图片失败：' + err.message;
        showEmptyMessage(iframe, '加载失败：' + err.message);
    } finally {
        loading.value = false;
    }
}
View Code

连续几篇，针对相同问题，几种方法，判断逻辑，呈现给用户内容。多样比，可以学习之或参考。


posted @ 2026-09-16 05:31  Insus.NET  阅读(4)  评论(0)    收藏  举报