File-Reader 實現

時間 2019-11-16

標籤 file reader 實現简体版

原文原文鏈接

實現一個File-Reader組件用來讀取本地資源。html

概述：在用戶手動上傳一些資源的時候，須要分爲兩步，第一步是將其從本地讀取出來，獲得一個file對象，而後再上傳至服務器。該組件用於第一步，而後可經過後續進一步封裝程Upload組件。ios

該組件的痛點在於：

添加拖拽上傳的功能；
本地文件的批量讀取，以及相關預覽；
相關瀏覽器的默認行爲的preventDefault；
相關文件的基本校驗。

2019年1月1日更新git

在該組件的 destroyed 生命週期中添加新特性，利用 URL.revokeObjectURL() 靜態方法用來釋放一個以前經過調用 URL.createObjectURL() 建立的已經存在的 URL 對象，從而進行垃圾收集。github

destroyed() {
    if (this.targetFiles.length && window.URL.revokeObjectURL) {
        this.targetFiles.forEach(file => {
            window.URL.revokeObjectURL(file.url);
        });
    }
}
複製代碼

1. 實例

代碼瀏覽器

<!-- 基礎用法 -->
<fat-filereader accept=".png, .jpg" :size="500 * 1024" @success="event => readHandler(event, 'file')" @error="errorHandler" />

<!-- 自定義上傳區域 -->
<fat-filereader @success="event => readHandler(event, 'otherFile')">
    <div slot="clickarea" class="upload-area">
        <fat-icon class="icon" name="cloud_upload" size="24"/>
    </div>
</fat-filereader>

<!-- 拖拽上傳 -->
<fat-filereader dragable @success="event => readHandler(event, 'anotherFile')">
    <div slot="clickarea" class="upload-area">
        <fat-icon class="icon" name="cloud_upload" size="24"/>
    </div>

    <span v-if="anotherFile.name">已上傳：{{ anotherFile.name }}</span>
</fat-filereader>

<!-- 上傳多個文件 -->
<fat-filereader multiple :limit="5" @success="multipleHandler" @error="errorHandler"/>
複製代碼

實例地址：File-Reader 實例bash

代碼地址：Github UI-Library服務器

2. 原理

該組件的實現是基於原生的<input type="file" />，再經過添加拖拽功能來以達到上圖效果。app

組件的基本結構以下，主要包含兩個部分：異步

其一是<slot name="clickarea"></slot>自定義的點擊區域；
其二是原生的< input type="file" />用來完成文件上傳工做。

<div :class="['file-reader', { 'is-disabled': disabled }]" >
    <div class="click-area" @click.stop="eventHandler('readFile')" @dragenter="prevent" @dragover="prevent" @drop="event => dragable && eventHandler('dropReadFile', event)" >
        <slot name="clickarea">
            <fat-button :disabled="disabled" type="success">上傳</fat-button>
        </slot>
    </div>
    <slot></slot>
    <input ref="input" type="file" class="is-hide" v-bind="$attrs" @change="event => eventHandler('change', event)" :disabled="disabled" >
  </div>
</template>
複製代碼

在<slot name="clickarea"></slot>外層包裹div標籤，用於監聽該區域的點擊事件。當它觸發時，相關處理函數爲ide

const handler = {
    readFile: () => {
        // fix change again
        this.$refs.input.value = "";
        this.$refs.input.click();
    },
    ...
};
複製代碼

先重置this.$refs.input.value，否則會出現沒法再上傳的問題。而後，觸發原生<input type="file" />的點擊事件，此時頁面上會彈出原生的上傳框。

監聽該標籤的change事件， @change="event => eventHandler('change', event)，若是發生上傳，會觸發相關處理函數。

eventHandler(type, event = {}) {
    const handler = {
        ...
        // read files
        change: event => (this.sourceFiles = event.target.files)
    };
    handler[type] && handler[type](event);
}
複製代碼

從event對象中，讀取選中待上傳的文件對象

包含着name文件名，size大小，type類型等屬性。

因爲部分文件須要進行預覽，例如img、svg等，因此須要生成對應的URL，基本方法爲：

window.URL.createObjectURL：該方法會建立一個 DOMString，其中包含一個表示參數中給出的對象的URL；
new FileReader：該對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，再經過readAsDataURL讀取指定的 Blob 或 File 對象。

首先判斷當前是否支持window.URL && window.URL.createObjectURL，若是支持，只需將已上傳的targetFiles進行處理

Array.prototype.map.call(value, file => ({
    // file => url
    url: window.URL.createObjectURL(file),
    file
}));
複製代碼

若是不支持該方法，則須要利用File Reader的readAsDataURL，因爲該方法是異步的，因此將其封裝爲Promise形式

const getReader = file => {
    return new Promise(function(resolve, reject) {
        const fileReader = new FileReader();
        // 讀取相關文件
        fileReader.readAsDataURL(file);
        // fileReader onload 時，返回其結果
        fileReader.onload = () => resolve(fileReader.result);
        fileReader.onerror = () => fileReader.abort();
    });
};
const readers = Array.prototype.map.call(value, file => getReader(file));
複製代碼

再利用Promise.all統一進行處理，結合已上傳的targetFiles生成返回結果。

Promise.all(readers).then(results => {
    this.targetFiles = results.map((url, i) => ({
        url,
        file: value[i]
    }));
});
複製代碼

以上完成基本的上傳、預覽功能。而後添加拖拽上傳功能，在clickArea監聽dragenter、dragover、drop事件。

<div 
    class="click-area" 
    @click.stop="eventHandler('readFile')"
    @dragenter="prevent"
    @dragover="prevent"
    @drop="event => dragable && eventHandler('dropReadFile', event)"
>
    <slot name="clickarea">
        <fat-button :disabled="disabled" type="success">上傳</fat-button>
    </slot>
</div>
複製代碼

相關處理函數爲

eventHandler(type, event = {}) {
    const handler = {
        ...
        dropReadFile: event => {
            event.preventDefault();
            this.sourceFiles = event.dataTransfer.files;
        }
    };
    handler[type] && handler[type](event);
},
prevent(event) {
    event.preventDefault();
}
複製代碼

利用event.dataTransfer.files獲取相關上傳文件，再經過event.preventDefault阻止遊覽器的一些默認行爲，例如直接預覽該文件等。獲取到sourceFiles以後的操做等同於以前點擊上傳。

讀取完成以後須要對文件進行校驗，主要有上傳文件的大小以及數量，相關代碼以下

targetFiles(value) {
    const { size, limit } = this;
        if (value.length > limit) {
            this.$emit("error", {
                msg: "the quantity of files is too large its number cannot exceed"
            });
        } else {
            if (
                value.some(item => {
                    const {
                        file: { size: fileSize }
                    } = item;
                    return size && fileSize > size;
                })
            ) {
                this.$emit("error", {
                    msg: "file is too large its size cannot exceed"
                });
            } else {
                this.$emit("success", value);
            }
        }
    }
}

複製代碼

3. 使用

相關的原生<input type="file" />的accept，multiple等屬性，利用v-bind=$attrs傳遞給原生的<input type="file" />。

以後，能夠結合相關上傳方法將其封裝程Upload組件，以Axios爲例

uploadFile (fileData) {
    const config = {
        // 依據當前環境配置
        baseURL: ...,
        headers: { 'Content-type': 'multipart/form-data' } 
    }
    let data = new FormData();
    data.append('file', fileData);
    data.append('name', fileData.name);
    
    return Axios.post('upload url', data, config)   
}
複製代碼

4. 總結

封裝一個File-reader組件，簡化其內部邏輯，方便後續拓展。

往期文章：

原創聲明：該文章爲原創文章，轉載請註明出處。

相關標籤/搜索

filereader

實現

現實

filewriter&filereader

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。