Input实现图片粘贴上传

背景介绍

需求：可上传文件的字段，图片可直接通过【ctrl+v】进行上传，无需保存本地再上传

代码实现

import { Input } from 'antd';

const { TextArea } = Input;

const handlePaste = (e: any) => {
    const items = e.clipboardData?.items ?? [];
    const files = Array.from(items).reduce((prev: any[], item: any) => {
      // 判断类型是图片
      if (item.type.indexOf('image') !== -1) {
        prev.push(item.getAsFile());
      }
      return prev;
    }, []);
    if (!files.length) return;
    // 取消默认复制行为，单独处理
    e.preventDefault();
};


<TextArea
  onPaste={handlePaste}
  autoSize={{ minRows: 3, maxRows: 6 }}
/>

详解

• e.clipboardData 属性保存了一个 DataTransfer 对象
• DataTransfer.items 提供一个包含所有拖动数据列表的 DataTransferItemList 对象。
• DataTransferItem.getAsFile() 返回一个关联拖拽项的 File 对象（当拖拽项不是一个文件时返回 null）。

总结

能根据类型type判断是哪种文件，特定类型单独处理，e.preventDefault()可以阻止默认粘贴行为。