react实现粘贴图片地址或粘贴图片文件上传

最近有个需求是实现粘贴图片地址或者直接粘贴图片上传并预览

 可以用onBlur搭配onPaste事件来实现

首先给Input绑定onBlur和onPaste事件，并判断是否超过图片文件最大数

<Input
          value={iptV}
          disabled={value?.length >= 9}
          onChange={(e) => {
            setIptV(e.target.value);
          }}
          onBlur={(e) => {
            if (value?.length > 9) {
              message.error('最多9张');
              return;
            }
            const url = e.target.value || '';
            if (!url) {
              setIptV('');
              return;
            }
            saveImgUrl(url, { value, onChange }, () => {
              setIptV('');
            });
          }}
          onPaste={(e) => {
            if (value?.length > 9) {
              message.error('最多9张');
              return;
            }
            const clipData = e.clipboardData || window.clipboardData;
            const isFiles = !!clipData.files?.length;

            if (isFiles && pasteData.canUpload) {
              pasteData.canUpload = false;
              saveImgFiles(clipData, { value, onChange }, () => {
                pasteData.canUpload = true;
              });
            }
          }}
        />

 在saveImgUrl方法中，通过创建img节点来判断复制的文本内容是否是图片链接，onload成功后，通过传入的onChange函数保存图片地址以便预览及传给后端，并传入callback回调。

function saveImgUrl(src: string, { value = [], onChange }: FormItemProps, callback?: VoidFunction) {
  const imgDom = document.createElement('img');
  imgDom.src = src;
  imgDom.onload = () => {
    const uid = `${moment().format('x')}${randomString(2)}`;
    const imgData = {
      uid,
      thumbUrl: src,
      name: src,
    };
    const [...imgs] = value;
    onChange?.([imgData, ...imgs]);
    imgDom.remove();
    callback?.();
  };
  imgDom.onerror = () => {
    message.error('图片链接错误');
    imgDom.remove();
    callback?.();
  };
} // 通过链接保存图片

以下则是直接复制图片文件上传的实现方式

async function saveImgFiles(
  clipboardData: DataTransfer,
  { value = [], onChange }: FormItemProps,
  callback?: VoidFunction,
) {
  const imgs = clipboardData.items || [];
  const isImgFiles = [];
  for (let i = 0; i < imgs?.length; i += 1) {
    const item = imgs[i];
    const { type } = item;
    if (type.indexOf('image') === 0) {
      const file = imgs[i].getAsFile();
      const { size = 0 } = file || {};
      if (!file || !size) {
        message.error('文件错误');
        callback?.();
        return;
      }
      if (size > maxSize) {
        message.error('文件超过1.8M');
        callback?.();
        return;
      }
      const form = new FormData();
      form.append('file', file);
      isImgFiles.push(form);
    }
  }
  if (!isImgFiles.length) {
    callback?.();
    return;
  }

  if ((value?.length || 0) + (isImgFiles?.length || 0) > 9) {
    message.error('最多9张');
    callback?.();
    return;
  }

  const uploadImgArr = isImgFiles.map((file) => uploadImage(file));
  const defaultUid = `${moment().format('x')}${randomString(2)}`;
  const defaultImgs = uploadImgArr.map((_, index) => ({
    uid: `${index}${defaultUid}${index}`,
    thumbUrl: undefined,
    name: undefined,
    status: 'uploading',
  }));
  onChange?.([...value, ...defaultImgs]);
  try {
    Promise.all(uploadImgArr)
      .then((res) => {
        const newImgs: any[] = [];
        res.forEach(({ pathUrl }, index) => {
          newImgs.push({
            uid: defaultImgs[index].uid,
            thumbUrl: pathUrl,
            name: pathUrl,
          });
        });
        onChange?.([...value, ...newImgs]);
        callback?.();
      })
      .catch(() => {
        const newImgs = defaultImgs.map((item) => ({ ...item, status: 'done' }));
        onChange?.([...value, ...newImgs]);
        callback?.();
      });
  } catch (err) {
    const newImgs = defaultImgs.map((item) => ({ ...item, status: 'done' }));
    onChange?.([...value, ...newImgs]);
    callback?.();
  }
} // 复制图片上传