press-ui/common/media/create_input.js

简单、易用的跨端组件库，兼容 Vue2 和 Vue3，同时支持 uni-app和普通 Vue 项目

import { updateElementStyle } from '../utils/utils';

import MIMEType from './MIMEType';


const ALL = '*';

function isWXEnv() {
  const ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) && ua.match(/MicroMessenger/i)[0] === 'micromessenger') {
    return true;
  }
  return false;
}

export default function ({ count, sourceType, type, extension = ['*'] }) {
  const inputEl = document.createElement('input');
  inputEl.type = 'file';

  updateElementStyle(inputEl, {
    position: 'absolute',
    visibility: 'hidden',
    'z-index': -999,
    width: 0,
    height: 0,
    top: 0,
    left: 0,
  });

  /**
   * 选择文件
   * chooseFile 使用后缀名
   * chooseImage、chooseVideo 使用MIME类型
   */
  inputEl.accept = extension.map((item) => {
    if (type !== ALL) {
      const MIMEKey = item.replace('.', '');
      return `${type}/${MIMEType[type][MIMEKey] || MIMEKey}`;
    }
    // 在微信环境里，'.jpeg,.png' 会提示没有应用可执行此操作
    if (isWXEnv()) {
      return '.';
    }
    return item.indexOf('.') === 0 ? item : `.${item}`;
  }).join(',');

  if (count > 1) {
    inputEl.multiple = 'multiple';
  }

  // 经过测试，仅能限制只通过相机拍摄，不能限制只允许从相册选择。
  if (sourceType.length === 1 && sourceType[0] === 'camera') {
    inputEl.capture = 'camera';
  }

  return inputEl;
}