JavaScript獲取上傳檔案相關資訊範例詳解

2022-08-26 14:03:24

前題場景

在開發過程中，檔案上傳是再熟悉不過的場景了，但是根據實際使用情況對上傳檔案的限制又各有不同。需要對本地上傳檔案進行相應的限制處理，防止不符合規則或者要求的檔案上傳到雲端儲存中，從而造成雲盤資源空間浪費。

與此同時，也在給使用者端使用檔案資訊之前做了一次資料過濾處理，減少使用者端對檔案資源的處理和校驗。

處理方式

因為使用者端使用後臺管理上傳的圖片檔案和音訊檔時，為了優化展示效果和載入的速度，所以在後臺管理系統上傳處希望依據圖片檔案的寬高比例對檔案大小做下相應的限制；

同時對上傳的音訊檔要依據音訊檔的時長做些相應的限制，比如：在指定時長範圍內的音訊檔的檔案大小做下對應的限制，符合要求檔案大小的檔案可以上傳到雲伺服器，不符合要求的就要進行相應的檔案上傳攔截，並作出對應的提示，以便於使用者在操作上傳檔案時候可以依據指定的提示去篩選出符合要求的檔案。

圖片檔案

通過建立圖片檔案物件來載入檔案流的方式來獲取圖片檔案的寬度和高度。

⚠️有些情況下需要單獨處理，把其他格式型別的檔案通過強制修改字尾名的方式來達到轉換檔案的目的，此種方式最終會通過“image.onerror”事件來輸出錯誤，在使用過程中可以使用該方法做下攔截處理。

/**
 * @description 獲取圖片寬度和高度
 * @param {Object} file 圖片檔案物件
 * @return {Object} {width: number, height: number} 圖片寬度和高度
 *  */
const getImageRadio = file => {
    return new Promise((resolve, reject) => {
        // 建立讀取檔案物件
        const reader = new FileReader();
        // 讀取檔案物件
        reader.readAsDataURL(file);
        // 檔案物件載入完成
        reader.onload = () => {
            // 建立image物件
            const imageEl = new Image();
            // 賦值src地址
            imageEl.src = reader.result;
            // 圖片載入成功
            imageEl.onload = () => {
                let imgWH = {
                    with: imageEl.width,
                    height: imageEl.height
                };
                return resolve(imgWH);
            };
            // 圖片載入失敗
            imageEl.onerror = () => {
                return reject(null);
            };
        };
        // 檔案物件載入失敗
        reader.onerror = () => {
            return reject(null);
        };
    });
};

音訊檔

通過建立音訊檔流的方式來獲取音訊檔的時長「視訊檔流同樣適用此方法」

⚠️有些情況下就是那其他格式型別的檔案通過轉換或者強制修改檔案字尾名的方式來達到轉換檔案型別的目的，此方法在測試環節可能會出現，但是在平時使用過程過出現的概率不是很大，但是防止粗心的人或者其他用意的人採用此種方式，因此需要對失敗事件“audioEl.onerror”進行監聽，來優化判斷邏輯，減少問題出現。

/**
 * @description 獲取音訊檔時長
 * @param {Object} file 音訊檔物件
 * @return {Number}  duration 時長
 *  */
const getAudioDuration = file => {
    return new Promise((resolve, reject) => {
        // 建立URL物件
        const audioURL = URL.createObjectURL(file);
        // 建立audio物件
        const audioEl = new Audio(audioURL);
        // 後設資料載入觸發事件
        audioEl.onloadedmetadata = () => {
            // 讀取檔案音訊時長
            const duration = audioEl.duration;
            return resolve(duration);
        };
        // 後設資料載入失敗
        audioEl.onerror = () => {
            return reject(null);
        };
    });
};

判斷處理

此處只是做了基礎的邏輯判斷，後續若有其他需求，可以根據自身實際需求場景進行相應的修改；

此處封裝的兩個非同步函數方法“獲取圖片檔案的寬度和高度”和“獲取音訊檔的時長”，對基礎格式的校驗比較簡單，後續可以根據實際情況做修改。

若是採用獲取檔案流的方式來獲取想要的檔案型別資訊，建議採用“非同步”的方式來載入檔案。

/**
 * @description 判斷檔案型別
 * @param {Object} file 檔案物件
 * @return {Object} file
 *  */
const checkFile = async file => {
    // 獲取檔案大小
    const fileSize = file.size || 0;
    // 獲取檔案型別
    const fileType = file.type;
    let isImage = false;
    let isAudio = false;
    // 判斷檔案型別
    if (fileType.includes("image/")) {
        // 圖片檔案
        if (fileType === "image/png") {
            // png圖片
            isImage = true;
        }
    } else if (fileType.includes("audio/")) {
        // 音訊檔
        if (fileType.includes("audio/mpeg")) {
            // mp3
            isAudio = true;
        }
    }
    // 判斷圖片
    if (isImage) {
        let imgRes = await getImageRadio(file);
    }
    // 判斷音訊
    else if (isAudio) {
        let audioRes = await getAudioDuration(file);
    }
    // 其他格式
    else {
      // 其他格式檔案
    }
};