前端react中实现直接复制粘贴上传图片

最终效果：
1.在浏览器随便复制一张图片

2. 在输入框右键/crtl+v粘贴，即出现：

3.点击发送即可！！

废话不多说，上代码：

  useEffect(() => {
    document.addEventListener('paste', async function (event) {
      var items = (event.clipboardData || window.clipboardData).items;
      var file = null;
      if (items && items.length) {
        // 搜索剪切板items
        for (var i = 0; i < items.length; i++) {
          if (items[i].type.indexOf('image') !== -1) {
            file = items[i].getAsFile();
            break;
          }
        }
      } else {
        console.log('当前浏览器不支持');
        return;
      }
      if (!file) {
        console.log('粘贴内容非图片');
        return;
      }
      // 此时file就是我们的剪切板中的图片对象
      console.log('file', file);

      // 上传文件接口，这里替换成对应的接口即可
      const fileData: any = await postFile(file);
      if (!fileData) {
        // fileData为空说明上传失败，即需回调失败状态
        return message.errorr('上传失败啦～');
      }

    //弹出二次确认发送框
      Modal.confirm({
        title: '确认发送该图片？',
        centered: true,
        icon: null,
        content: (
          <Image
            width={360}
            src={fileData.url}
            // preview
            preview={{
              mask: <div>预览</div>,
            }}
          />
        ),
        okText: '确认',
        onOk: async (file) => {
        // 处理发送。。
         message.success('发送成功')
        },
      });
    });
  }, []);

参考：https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard

原文地址：https://blog.csdn.net/weixin_47793882/article/details/143873401

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！