File-Reader 实现

实现一个File-Reader组件用来读取本地资源。

概述： 在用户手动上传一些资源的时候，须要分为两步，第一步是将其从本地读取出来，获得一个file对象，而后再上传至服务器。该组件用于第一步，而后可经过后续进一步封装程Upload组件。

该组件的痛点在于：

• 添加拖拽上传的功能；
• 本地文件的批量读取，以及相关预览；
• 相关浏览器的默认行为的preventDefault；
• 相关文件的基本校验。

---

2019年1月1日更新

在该组件的 destroyed 生命周期中添加新特性，利用 URL.revokeObjectURL() 静态方法用来释放一个以前经过调用 URL.createObjectURL() 建立的已经存在的 URL 对象，从而进行垃圾收集。

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 实例

代码地址：Github UI-Library

2. 原理

该组件的实现是基于原生的<input type="file" />，再经过添加拖拽功能来以达到上图效果。

组件的基本结构以下，主要包含两个部分：

• 其一是<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标签，用于监听该区域的点击事件。当它触发时，相关处理函数为

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组件，简化其内部逻辑，方便后续拓展。

往期文章：

• 从零实现Vue的组件库（零）- 基本结构以及构建工具
• 从零实现Vue的组件库（一）- Toast 实现
• 从零实现Vue的组件库（二）- Slider 实现
• 从零实现Vue的组件库（三）- Tabs 实现
• 从零实现Vue的组件库（四）- File-Reader 实现
• 从零实现Vue的组件库（五）- Breadcrumb 实现
• 从零实现Vue的组件库（六）- Hover-Tip 实现
• 从零实现Vue的组件库（七）- Message-Box 实现
• 从零实现Vue的组件库（八）- Input 实现
• 从零实现Vue的组件库（九）- InputNumber 实现
• 从零实现Vue的组件库（十）- Select 实现
• 从零实现Vue的组件库（十一）- Date-picker 实现
• 从零实现Vue的组件库（十二）- Table 实现
• 从零实现Vue的组件库（十三）- Pagination 实现
• 从零实现Vue的组件库（十四）- RadioGroup 实现
• 从零实现Vue的组件库（十五）- CheckboxGroup 实现

原创声明： 该文章为原创文章，转载请注明出处。