vtils/utils/chooseFile.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

import { toArray } from 'lodash-uni';
import { bindEvent } from "./bindEvent.js";
import { wait } from "./wait.js";

/**
 * 选择文件。
 *
 * @param accept 接受的文件类型，其中默认的 `image` 表示 `image/*`
 * @param multiple 是否多选
 * @returns 返回选中的文件列表
 */

/**
 * 选择文件。
 *
 * @param accept 接受的文件类型，其中默认的 `image` 表示 `image/*`
 * @param options 选项
 * @returns 返回选中的文件列表
 */

export function chooseFile(accept, multipleOrOptions) {
  return new Promise(function (resolve) {
    var options = typeof multipleOrOptions === 'boolean' ? {
      multiple: multipleOrOptions
    } : multipleOrOptions || {};
    var input = document.createElement('input');
    input.style.all = 'unset';
    input.style.position = 'fixed';
    input.style.top = '0px';
    input.style.clip = 'rect(0, 0, 0, 0)';
    input.style.webkitUserSelect = 'text';
    // @ts-ignore
    input.style.MozUserSelect = 'text';
    // @ts-ignore
    input.style.msUserSelect = 'text';
    input.style.userSelect = 'text';
    input.type = 'file';
    input.accept = accept === 'image' ? 'image/*' : accept;
    input.multiple = !!options.multiple;
    options.afterElementReady == null || options.afterElementReady({
      el: input
    });
    document.body.appendChild(input);
    var handleChange = function handleChange() {
      unbindChange();
      unbindCancel();
      unbindFocus();
      unbindTouchend();
      if (input) {
        var files = input.files || [];
        document.body.removeChild(input);
        input = null;
        resolve(Object.freeze(toArray(files)));
      }
    };
    var unbindChange = bindEvent(input)('change', handleChange);

    // 标准取消监听 但有兼容问题
    // https://caniuse.com/?search=HTMLInputElement%20cancel
    var unbindCancel = bindEvent(input)('cancel', handleChange);

    // 取消监听 hack
    // https://stackoverflow.com/a/67603015
    var unbindFocus = bindEvent(window)('focus', function () {
      return wait(1000).then(handleChange);
    });
    var unbindTouchend = bindEvent(window)('touchend', function () {
      return wait(1000).then(handleChange);
    });
    input.click();
  });
}