@fatesigner/file-chooser v2.0.0

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, IFileChooserChangeResponse } from '@fatesigner/file-chooser';

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

// 设置页面上指定的一个元素，点击后打开
const 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/utils/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.

createFileChooser

为界面上指定的元素创建文件选择器实例，可为其绑定 click 事件

IFileChooserOptions

IFileChooserChangeResponse

export interface IFileChooserChangeResponse {
  data?: any;
  files: File[];
}

IFileChooser

export interface IFileChooser {
  trigger: () => void;
  destroy: () => void;
}