相册图片事件

快速上手

const imgLimit = 9;

const Upload = () => {
  const formStore = FormStore.useContainer();
  const { formStates, changeFormStates } = formStore;
  const { imageList } = formStates;

  const handleImgUploadClick = async () => {
    const list = await chooseImage({ count: imgLimit - imageList.length });

    changeFormStates({ imageList: [...imageList, ...list] });
  };

  return (
    <div className={styles.wrap}>
      {
        //展示UI
        //    imageList.map((item) => {
        //     const { id } = item;
        //     return <Grid content={item} key={id} type={"image"} />;
        //   })
      }
      {imageList.length >= imgLimit || videoList.length ? null : (
        <div className={styles.imgUploadBtn} onClick={handleImgUploadClick}>
          添加图片
        </div>
      )}
    </div>
  );
};

import { v4 as uuidv4 } from 'uuid';

// 封装调起相册选择图片API
export const chooseImage = async ({ count = 1 }) => {
    const imageId = 'chooseImage';
    // 获取上传文件的dom节点
    let chooseImageId = document.getElementById(imageId);

    // 如果上传文件的dom节点不存在则创建
    if (!chooseImageId) {
        const obj = document.createElement('input');

        obj.setAttribute('type', 'file');
        obj.setAttribute('id', imageId);
        if (count > 1) {
            obj.setAttribute('multiple', 'multiple');
        }
        obj.setAttribute('accept', 'image/*');
        obj.setAttribute('style', 'position: fixed; top: -4000px; left: -3000px; z-index: -300;');
        document.body.appendChild(obj);
        chooseImageId = document.getElementById(imageId);
    } else if (count > 1) {
        chooseImageId.setAttribute('multiple', 'multiple');
    } else {
        chooseImageId.removeAttribute('multiple');
    }

    // 创建鼠标点击事件
    const event = new MouseEvent('click');

    // 获取上传的文件列表
    const files = await new Promise(resolve => {
        chooseImageId.onchange = e => {
            resolve([...e.target.files]);
        };
        // 上传文件dom触发鼠标点击事件
        chooseImageId.dispatchEvent(event);
    });