@fatesigner/file-chooser

file-chooser

web 文件选择器的函数式封装.

说明

• 为 Web input file 操作提供函数式的调用
• 使用 typescript 编写，定义了一套接口，以适用不同类型的客户端，如 H5、wechat（微信）
• 支持对图片文件的压缩，使用 @fatesigner/img-compressor
• 利用 Webpack 的 dynamic import 以减少首屏加载时间

安装

npm i -S @fatesigner/file-chooser

使用

startup.ts

import { fileChooserConfigure } from '@fatesigner/file-chooser';

// 预先配置 file-chooser 默认选项（全局）
fileChooserConfigure({
  // 指定文件类型限制
  fileTypeLimits: ['jpg', 'png'],
  ...
});

main.ts

import { openFileChooser, createFileChooser } from '@fatesigner/file-chooser';
import { IFileChooserChangeResponse } from '@fatesigner/file-chooser/interfaces';

// 直接打开
openFileChooser({
  accept: '.jpg,.png'
}).then((res) => {
  // show selected files
  console.log(res);
}).catch((err) => {
  console.log(err);
});

// 设置页面上指定的一个元素，点击后打开
let chooser = await createFileChooser(
  document.querySelector('#btnChooseFile'), {
  accept: '.jpg,.png'
}, (res: IFileChooserChangeResponse) => {
  // show selected files
  console.log(res);
}, (err: Error) => {
  console.log(err);
});

// 手动打开
chooser.trigger();

// 移除
chooser.destroy();

在 Vue 中使用

<div title="选择文件"
    v-file-chooser="fileChooser.options"
    @fileChooserChange="onFileChooserChange"
    @fileChooserError="onFileChooserError"
>
  <img :src="src" alt="" title="" />
</div>

import { Vue } from 'vue';
import { GetImageSrc } from '@fatesigner/file-chooser/document';
import { fileChooserDirective } from '@fatesigner/file-chooser';

Vue.use(fileChooserDirective);

export default {
  data() {
    return {
      src: '',
      fileChooser: {
        options: {
          accept: '.jpg,.png',
          multiple: false,
          maxSize: 10 * 1024,
          compress: {
            quality: 0.6
          }
        }
      }
    };
  },
  methods: {
    onFileChooserChange(res) {
      // set src from file.
      GetImageSrc(res.files[0]).then((src) => {
        this.src = src;
      });
    },
    onFileChooserError(err) {
      console.log(err);
    }
  }
}

API

openFileChooser

以函数调用的方式打开文件选择框，无需操作 document.

Param	Description
options	IFileChooserOptions

createFileChooser

将界面上指定的元素设置绑定点击事件，打开文件选择框.

Param	Description
targetEl	ElementRef
options	IFileChooserOptions
onChanged	文件选择成功后触发，返回 IFileChooserChangeResponse
onFailed	文件类型、尺寸、数量不符后触发，返回 Error

IFileChooserOptions

Param	default	Description
accept	null	允许的文件类型， HTML attribute: accept
capture	null	需要捕获的系统设备， HTML attribute: capture
multiple	null	允许用户选择多个文件，默认为 false
maxCount	null	允许用户选择的文件的数量，默认为 null，即无限制
minSize	null	允许用户选择的文件的最小尺寸，默认为 null，即无限制
maxSize	null	允许用户选择的文件的最大尺寸，默认为 null，即无限制
id	GUID	设置元素id，默认设置为一个GUID
fileTypeLimits	[ ]	在accept参数的基础上限制用户选择的文件类型，默认为空数组，即无限制
data	null	绑定任意值，在选择文件事件回调中返回
clickable	true	允许用户点击触发
compress	{ quality: 0.8 }	图片压缩选项，具体参数可查看 @fatesigner/img-compressor

IFileChooserOptions

Param	Description
data	初始化时绑定的data
files	用户选择的图片列表 File[]