@antv/g6 右键菜单menu，上传图片，并上传到服务器。

鼠标右键结点，然后弹出菜单：

弹出选择图片的对话框，选择图片，提交到服务器，并返回url

选择图片，点击打开，系统会自动上传图片，并返回url.

g6.menu：

const menu = new G6.Menu({
    offsetX: 6,
    offsetY: 10,
    itemTypes: ['node'],
    getContent(e) {
      const outDiv = document.createElement('div');
      outDiv.style.width = '180px';
      outDiv.innerHTML = `<ul>
          <li title='修改节点' class='menu_item'>修改节点</li>
          <li title='上传图片' class='menu_item'>上传图片</li>
        </ul>`;
      return outDiv;
    },
    handleMenuClick(target, item) {
      console.log(target, item);
      if (target.title == '修改节点') {
        handleOpen(item.getModel());
      } else if (target.title == '上传图片') {
        handleOpenImg(item.getModel());
      }
    },
  });

打开对话框，上传：

//上传图片
  function handleOpenImg(item) {
    console.log(item);
    let input = document.createElement('input');
    input.type = 'file';
    input.accept = '.png,.jpg,.jpeg'; // 限制选择的文件类型为 .png,.jpg
    input.style.display = 'none';
    document.body.appendChild(input);
    input.click();
    input.onchange = (e) => {
      const file = e.target.files[0]; // 获取文件对象
      (async () => {
        try {
          // 使用转换后的文件进行后续操作
          // console.log(file);
          const formBody = new FormData();
          formBody.append('file', file);
          return fetch(String(uploadUrl), {
            headers: {
              realname: encodeURIComponent(userinfo.value.realName),
              userid: userinfo.value.userId,
            },
            method: 'POST',
            body: formBody,
          })
            .then((response) => response.json())
            .then((data) => {
               //删除input(type=file)
              document.body.removeChild(input)
              console.log('upload:', JSON.stringify(data));
              if (data.code == 0) {
                // createMessage.success(`上传文件成功！`);
                //根据返回的data结构中的url+item.id，去服务器更新相应的结点。
              } else {
                createMessage.error(`上传失败，${data.msg}！`);
              }
            })
            .catch(() => {
              createMessage.error('上传失败。');
            });

          // return file;
        } catch (error) {
          console.error(error);
        }
      })();
    };
  }

上传图片的url:

import { useGlobSetting } from '/@/hooks/setting';
const { uploadUrl } = useGlobSetting();

这样通过右键菜单menu，就可以完成文件的处理，更新完了数据以后，可以更新节点，完成节点图片的编辑操作。

官方G6